├── .gitignore ├── README.md ├── _config.yml ├── homework ├── lesson1 │ ├── Autumn.md │ ├── ElizabethZhouli.md │ ├── GaoXianfeng.md │ ├── Huang_Biling.md │ ├── Jaykey.md │ ├── Learner-Chen.md │ ├── LiaoYuemin.md │ ├── Liuzhengchun.md │ ├── Rachel.md │ ├── Risexie.md │ ├── SunBo.md │ ├── WangChangQing.md │ ├── Wei.md │ ├── WuGaoxing.md │ ├── XGunn-lesson01.md │ ├── ZhengChao.md │ ├── anjiancai.md │ ├── baoguoqiang.md │ ├── caijinpeng.md │ ├── caozhen.md │ ├── chaigaoping.md │ ├── chengjun.md │ ├── chenlingmin.md │ ├── chenqiong.md │ ├── chenrushan.md │ ├── chenyanxing.md │ ├── chenzidong.md │ ├── chenziwen.md │ ├── cloudyview.md │ ├── cuimeng.md │ ├── cuimiao.md │ ├── dangfeipeng.md │ ├── dengxy0907.md │ ├── diaozhicong.md │ ├── donglili.md │ ├── duhongxia.md │ ├── fangqingyang.md │ ├── fanliao.md │ ├── fanqing.md │ ├── feixiguang.md │ ├── fengkai.md │ ├── hanmeng.md │ ├── hanwei.md │ ├── haohu.md │ ├── hewei.md │ ├── huangjiashu.md │ ├── huangqi.md │ ├── huangxiaohui.md │ ├── huangzhihua.md │ ├── huxiaodan.md │ ├── huyong.md │ ├── ianyang.md │ ├── jaychen.md │ ├── jianglin.md │ ├── langjianjun.md │ ├── leizhen.md │ ├── lichen.md │ ├── linchunlong.md │ ├── lingxiao.md │ ├── linxiyao.md │ ├── lipeng.md │ ├── lipengyu.md │ ├── litao.md │ ├── liucheng.jpeg │ ├── liujuanjuan1984.md │ ├── liujun-sh.md │ ├── liujun.md │ ├── liuliyuan.md │ ├── liuqing.md │ ├── liuruyong.md │ ├── liushengsi.md │ ├── liushengxin.md │ ├── liuxiaohaohao.md │ ├── lixiang.md │ ├── lixiaoxin.md │ ├── liyihang.md │ ├── luoruijun.md │ ├── maggiewong.md │ ├── panqi.md │ ├── panyong.md │ ├── qiujingyu.md │ ├── shaozhen.md │ ├── shenzhili.md │ ├── sophieQi.md │ ├── sunxl.md │ ├── tangjianfeng.md │ ├── taobao.md │ ├── tuyilang.md │ ├── wangmeiling.md │ ├── wangshasha.md │ ├── wangwei.md │ ├── wangxuanding.md │ ├── wangyuliang.md │ ├── wangyunfei.md │ ├── wangzhongbin.md │ ├── wenliuxin.md │ ├── wenyunxin.md │ ├── wufan.md │ ├── wukuipin.md │ ├── xianengqi.md │ ├── xiaochaoge.md │ ├── xieyuhui.md │ ├── xiongliyu.md │ ├── xugang.md │ ├── xugaoyang.md │ ├── xuli.md │ ├── xuluchun.md │ ├── xumin.md │ ├── yammy.md │ ├── yangchunguang.md │ ├── yanglovewo.md │ ├── yangtieming.md │ ├── yangxuewu.md │ ├── yangyepeng.md │ ├── yanqingmu.md │ ├── yimiao.md │ ├── yongfei.md │ ├── youshilei.md │ ├── yueruiqi.md │ ├── yujianke.md │ ├── zhanggaoyang.md │ ├── zhanghuanyuan.md │ ├── zhanghy.md │ ├── zhanglina.md │ ├── zhangqian.md │ ├── zhangruirui.md │ ├── zhangxuedong.md │ ├── zhaokaili.md │ ├── zhaoxiaoxin.md │ ├── zhaoyinan.md │ ├── zhouhong.md │ ├── zhouqizhou.md │ ├── zhouziqi.md │ ├── zhuningning.md │ ├── zhuting.md │ ├── zhuxiaoping.md │ └── zhuyongjin.md ├── lesson2 │ ├── Autumnchou.md │ ├── GaoXianfeng.md │ ├── JayChen.md │ ├── Jaykey_Guo.md │ ├── LiaoYuemin.md │ ├── Liuzhengchun.md │ ├── Rachel.md │ ├── Risexie.md │ ├── SunBo.md │ ├── WANG XUANDING.md │ ├── WangChangQing.md │ ├── WuGaoxing.md │ ├── Zhengchao.md │ ├── baoguoqiang.md │ ├── caozhen.md │ ├── chengjun.md │ ├── chenguoqiang.md │ ├── chenqiong.md │ ├── chenrushan.md │ ├── chenziwen.md │ ├── cloudyview.md │ ├── cuimiao.md │ ├── dangfeipeng.md │ ├── dengxy0907.md │ ├── diaozhicong.md │ ├── duhongxia.md │ ├── fangqingyang.md │ ├── fanqing.md │ ├── fengkai.md │ ├── guowei.md │ ├── hanmeng.md │ ├── hanwei.md │ ├── haohu.md │ ├── hewei.md │ ├── huangjiashu.md │ ├── huangqi.md │ ├── huangzhihua.md │ ├── huyong.md │ ├── jianglin.md │ ├── langjianjun.md │ ├── leizhen.md │ ├── lichen.md │ ├── lingxiao.md │ ├── linxiyao.md │ ├── lipeng.md │ ├── litao.md │ ├── liujuanjuan.md │ ├── liujun.md │ ├── liuliyuan.md │ ├── liuqing.md │ ├── liuruyong.md │ ├── liushengsi.md │ ├── liushengxin.md │ ├── liuxiaohaohao.md │ ├── lixiang.md │ ├── liyihang.md │ ├── luoruijun.md │ ├── marshalcy.md │ ├── panqi.md │ ├── panyong.md │ ├── qiujingyu.md │ ├── shaozhen.md │ ├── shenzhili.md │ ├── sophieQi.md │ ├── tangjianfeng.md │ ├── taobao.md │ ├── tuyilang.md │ ├── wangshasha.md │ ├── wangwei.md │ ├── wangying.md │ ├── wangyunfei.md │ ├── wangzhongbin.md │ ├── wenliuxin.md │ ├── wenyunxin.md │ ├── wufan.md │ ├── wukuipin.md │ ├── xianengqi.md │ ├── xiongliyu.md │ ├── xugaoyang.md │ ├── xuli.md │ ├── xuluchun.md │ ├── xumin.md │ ├── yammy.md │ ├── yangtieming.md │ ├── yangxuewu.md │ ├── yangyepeng.md │ ├── yanqingmu.md │ ├── yimiao.md │ ├── yongfei.md │ ├── youshilei.md │ ├── yueruiqi.md │ ├── yujianke.md │ ├── zhanggaoyang.md │ ├── zhanglina.md │ ├── zhangqian.md │ ├── zhangxuedong.md │ ├── zhaokaili.md │ ├── zhaoxiaoxin.md │ ├── zhaoyinan.md │ ├── zhengchengyan.md │ ├── zhouhong.md │ ├── zhouwenming.md │ ├── zhuningning.md │ ├── zhuting.md │ ├── zhuxiaoping.md │ ├── zhuyongjin.md │ ├── zongjie-fanliao.md │ ├── 第二次作业.md │ ├── 第二次课程总结.html │ └── 第二次课程总结.md ├── lesson3 │ ├── CHENCHEN.PNG │ ├── GaoXianfeng.jpeg │ ├── GaoXianfeng.md │ ├── Jaychen.png │ ├── Jaykey_Guo.md │ ├── LiaoYuemin.md │ ├── LiaoYuemin.png │ ├── LiuShengsi.png │ ├── Risexie.md │ ├── SunBo.png │ ├── Thumbs.db │ ├── WANGXuanding.png │ ├── WangChangQing.md │ ├── WangChangQing.png │ ├── WuGaoxing.png │ ├── anjiancai.png │ ├── baoguoqiang.png │ ├── caijinpeng.md │ ├── caijinpeng.png │ ├── caozhen.png │ ├── chaigaoping.png │ ├── chengjun.png │ ├── chenrushan.png │ ├── chenyanxing.png │ ├── chenziwen.png │ ├── cloudyview.md │ ├── cuimiao.md │ ├── cuimiao.png │ ├── cuiyuwei.jpg │ ├── dangfeipeng.png │ ├── dengxy0907.md │ ├── diaozhicong.jpg │ ├── fangqingyang.PNG │ ├── fangqingyang.md │ ├── fanliao.png │ ├── fanqing.png │ ├── fengkai.jpeg │ ├── guowei.md │ ├── hanmeng.jpg │ ├── hanwei.md │ ├── hanwei.png │ ├── haohu.png │ ├── hewei.md │ ├── hewei.png │ ├── hitchhacker.png │ ├── huangBiLing.md │ ├── huangqi.png │ ├── jianglin.jpg │ ├── jianglin.md │ ├── langjianjun.png │ ├── leizhen.jpg │ ├── leizhen.md │ ├── lianghf.png │ ├── lichen.md │ ├── lichen.png │ ├── linxiyao_jiaofutu.png │ ├── lipeng.jpg │ ├── lipeng.md │ ├── liujuanjuan1984.md │ ├── liujun.png │ ├── liuliyuan.jpg │ ├── liuqing-3.jpg │ ├── liuruyong.png │ ├── liushengxin.png │ ├── liuxiaohaohao.md │ ├── liuxiaohaohao1.png │ ├── liuzhengchun.png │ ├── liuzhengchun_modify.png │ ├── lixiang.png │ ├── luoruijun.png │ ├── panqi.md │ ├── panyong.png │ ├── qiujingyu.png │ ├── shaozhen.png │ ├── sophieQi.md │ ├── taobao.md │ ├── taobao.png │ ├── wangfanhao.png │ ├── wangshasha.jpg │ ├── wangwei.md │ ├── wangying.jpg │ ├── wangyunfei_zongjie.md │ ├── wangyunfei_zuoyetu01.png │ ├── wangyunfei_zuoyetu02.png │ ├── wangyunfei_zuoyetu03.png │ ├── wangzhongbin.jpg │ ├── wenliuxin.JPG │ ├── wenliuxin.md │ ├── wenyunxin.png │ ├── wufan.md │ ├── wufan.png │ ├── wukuipin.md │ ├── wukuipin.png │ ├── xianengqi3.md │ ├── xiaochaoge.jpeg │ ├── xiaochaoge.md │ ├── xiaoyi.md │ ├── xiongliyu.md │ ├── xugaoyang.md │ ├── yammy.md │ ├── yammy.png │ ├── yangchunguang.png │ ├── yangtieming.png │ ├── yangxuewu.png │ ├── yanqingmu.md │ ├── yanqingmu.png │ ├── yongfei.png │ ├── youshilei.png │ ├── zhanggaoyang.png │ ├── zhanglina.jpeg │ ├── zhangqian.png │ ├── zhaokaili.jpg │ ├── zhaoxiaoxin.md │ ├── zhaoxiaoxin.png │ ├── zhaoyinan.png │ ├── zhouqizhou.png │ ├── zhuningning.jpg │ ├── zhuyongjin-3.jpg │ ├── 交互图.png │ ├── 微信图片_20170822192354.jpg │ ├── 浏览器与服务器交互图_cc.PNG │ ├── 第三次作业 交互图.md │ ├── 网页数据交互.png │ ├── 谢玉辉.jpg │ └── 谢玉辉.md.md ├── lesson4 │ ├── Jaykey.md │ ├── Risexie.md │ ├── WuGaoxing.md │ ├── jianglin.md │ ├── liujuanjuan1984.md │ ├── panyong.md │ ├── taobao.md │ └── xiaochaoge.md ├── lesson5 │ ├── GaoXianfeng.md │ ├── JayChen.md │ ├── Jaykey_Guo.md │ ├── LiaoYuemin.md │ ├── LiuShengsi's homework of lesson5.md │ ├── Risexie.md │ ├── WANG Xuanding.md │ ├── WuGaoxing.md │ ├── Zhengchao.md │ ├── anjiancai.md │ ├── baoguoqiang.md │ ├── caijinpeng.md │ ├── caozhen.md │ ├── chenguoqiang.md │ ├── chenrushan.md │ ├── chenyanxing.md │ ├── chenziwen.md │ ├── cloudyview.md │ ├── cuimiao.md │ ├── dengxy0907.md │ ├── diaozhicong.md │ ├── donglili.md │ ├── fangqingyang.md │ ├── fanliao.md │ ├── fanqing.md │ ├── fengkai.md │ ├── guowei.md │ ├── hanwei.md │ ├── haohu.md │ ├── hewei.md │ ├── huangBiLing.md │ ├── huangjiashu.md │ ├── huyong.md │ ├── jianglin.md │ ├── langjj.md │ ├── lichen.md │ ├── limu.md │ ├── lingxiao.md │ ├── linxiyao-homework-lesson5.md │ ├── lipeng-学习“异步实现一桌酒席”心得，代码难点分析.md │ ├── lipeng.md │ ├── liujuanjuan1984.md │ ├── liujun.md │ ├── liuliyuan.md │ ├── liuruyong.md │ ├── liushengxin.md │ ├── lixiang.md │ ├── luoruijun.md │ ├── maggiewong.md │ ├── marshalcy.md │ ├── oyanagchun的作业 │ ├── panyong.md │ ├── qiujingyu.md │ ├── readme.md │ ├── shaozhen.md │ ├── shenzhili.md │ ├── sophieQi.md │ ├── sunyan.md │ ├── tangjianfeng.md │ ├── taobao.md │ ├── wangchangqing.md │ ├── wangwei.md │ ├── wangyunfei.md │ ├── wangzhongbin.md │ ├── wengguihua.md │ ├── wenliuxin.md │ ├── wenyunxin.md │ ├── wufan.md │ ├── wukuipin.md │ ├── xianengqi.md │ ├── xiongliyu.md │ ├── yammy.md │ ├── yangchunguang.md │ ├── yangtieming.md │ ├── yangxuewu.md │ ├── yanqingmu.md │ ├── yimiao li 5th.md │ ├── youshilei.md │ ├── zhanggaoyang.md │ ├── zhanglina.md │ ├── zhaoxiaoxin.md │ ├── zhaoyinan.md │ ├── zhouqizhou.md │ ├── zhuningning.md │ ├── zhutinglesson5.md │ ├── zhuyongjin.md │ └── 谢玉辉.md ├── lesson6 │ ├── GaoXianfeng.js │ ├── LiuShengsi.js │ ├── Risexie.js │ ├── WANG_Xuanding.js │ ├── Wei.js │ ├── WuGaoxing.js │ ├── anjiancai.js │ ├── babysodme.js │ ├── baoguoqiang.js │ ├── caijinpeng.js │ ├── caozhen.js │ ├── caozhen.md │ ├── chenrushan.js │ ├── chenyanxing.js │ ├── chenziwen.js │ ├── cloudyview.js │ ├── cuimiao.js │ ├── cuiyuwei.js │ ├── dangfeipeng.js │ ├── dengxy0907.js │ ├── diaozhicong.js │ ├── donglili.js │ ├── fangqingyang.js │ ├── fanliao.js │ ├── fengkai.js │ ├── hanwei.js │ ├── haohu.js │ ├── hewei.js │ ├── hitchhacker.js │ ├── huangjiashu.js │ ├── huyong.js │ ├── jaykeyGuo.js │ ├── jaykeyGuo.md │ ├── jianglin.js │ ├── langjianjun.js │ ├── lesson9.jpg │ ├── lesson9.md │ ├── lianghf.js │ ├── liaoyuemin.js │ ├── lichen_async.js │ ├── lichen_sync.js │ ├── limingxing.js │ ├── lingxiao.js │ ├── lipeng.js │ ├── liujuanjuan1984.js │ ├── liujun.js │ ├── liuliyuan.js │ ├── liuliyuan.md │ ├── liushengxin.js │ ├── lixiang.js │ ├── lixiang.md │ ├── luoruijun.js │ ├── mindongquan.js │ ├── ouyangchun.js │ ├── panyong.js │ ├── qiujingyu.js │ ├── readme.md │ ├── shaozhen.js │ ├── shenzhili.js │ ├── sunyan.js │ ├── tangjianfeng.js │ ├── taobao.js │ ├── tuyilang.js │ ├── wangchangqing.js │ ├── wangganzy.js │ ├── wangshasha.js │ ├── wangwei.js │ ├── wangyunfei.js │ ├── wangzhongbin.js │ ├── weiyang.js │ ├── wengguihua.js │ ├── wenliuxin.js │ ├── wenyunxin.js │ ├── wufan.js │ ├── wukuipin.js │ ├── xianengqi.js │ ├── xiongliyu.js │ ├── yammy.js │ ├── yangtieming.js │ ├── yangxuewu.js │ ├── yanqingmu.js │ ├── yimiao.js │ ├── youshilei.js │ ├── zhanggaoyang.js │ ├── zhanglina.js │ ├── zhanglina.md │ ├── zhaokaili.js │ ├── zhaoxiaoxin.js │ ├── zhaoxiaoxin.md │ ├── zhaoyinan.js │ ├── zhengchao.js │ ├── zhengchao.md │ ├── zhuting.js │ ├── zouhainan.js │ └── 谢玉辉六课作业.js ├── lesson7 │ ├── GaoXianfeng.md │ ├── anjiancai.md │ ├── chenguoqiang.md │ ├── chenrushan.md │ ├── chenyanxing.md │ ├── chenziwen.md │ ├── cloudyview.md │ ├── cuiyuwei.md │ ├── dangfeipeng.md │ ├── dengxy0907.md │ ├── diaozhicong.md │ ├── fangqingyang.md │ ├── fengkai.md │ ├── guowei.md │ ├── hanwei.md │ ├── hewei.md │ ├── hitchhacker.md │ ├── huangBiLing.md │ ├── huangjiashu.md │ ├── jaykeyGuoJian.md │ ├── liaoyuemin.md │ ├── lingxiao.md │ ├── lipeng.md │ ├── liujun.md │ ├── liuliyuan.md │ ├── lixiang.js │ ├── lixiang.md │ ├── luoruijun.md │ ├── qiujingyu.md │ ├── readme.md │ ├── shaozhen.md │ ├── shenzhili.md │ ├── taobao.md │ ├── wangwei.md │ ├── wangyunfei.md │ ├── wangzhongbin.js │ ├── wangzhongbin.md │ ├── weiyang.js │ ├── wengguihua.md │ ├── wenyunxin.md │ ├── wukuipin.js │ ├── wukuipin.md │ ├── xieyuhui.md │ ├── yammy.md │ ├── yangtieming.md │ ├── yangxuewu.md │ ├── yanqingmu.md │ ├── yimiaoli.md │ ├── yinzhibao.md │ ├── youshilei.md │ ├── zhanglina.md │ ├── zhaokaili.md │ ├── zhaoxiaoxin.md │ ├── zhaoyinan.md │ ├── zhengchao.js │ └── zhengchao.md └── lesson9 │ ├── GaoXianfeng.md │ ├── dengxy0907.md │ ├── fangqingyang.md │ ├── guowei.md │ ├── liujun.md │ ├── wayne.md │ ├── weiyang.html │ ├── wukuipin.md │ ├── yammy.md │ └── yinzhibao.md ├── package-lock.json ├── public ├── jquery-3.2.1.min.js ├── libs │ └── bootstrap-3.3.7-dist │ │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap-theme.min.css.map │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ └── bootstrap.min.css.map │ │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ │ └── js │ │ ├── bootstrap.js │ │ ├── bootstrap.min.js │ │ └── npm.js ├── style.css └── vue.min.js ├── script ├── checkHomework.js ├── checkMyFile.js ├── clean.js ├── fs.js ├── package-lock.json ├── package.json ├── run.js ├── scan.js ├── start.js ├── teams.md └── updateTeam.js ├── study ├── lesson10 │ ├── first-web-app │ │ ├── app.js │ │ ├── bin │ │ │ └── www │ │ ├── package.json │ │ ├── public │ │ │ ├── style.css │ │ │ ├── stylesheets │ │ │ │ └── style.css │ │ │ ├── vue.min.js │ │ │ └── words.js │ │ ├── routes │ │ │ ├── index.js │ │ │ └── users.js │ │ └── views │ │ │ ├── error.ejs │ │ │ └── index.ejs │ └── github_index │ │ ├── index.html │ │ └── public │ │ ├── style.css │ │ └── vue.min.js ├── lesson2 │ ├── github_index │ │ ├── index.html │ │ └── public │ │ │ └── style.css │ ├── my_personal_info_page.html │ ├── sample1.html │ ├── sample2.html │ ├── sample3.html │ └── sample_code.js ├── lesson3 │ ├── name_style.js │ └── statement.js ├── lesson4 │ ├── build_a_human.js │ ├── kitchen_workflow.js │ ├── object.js │ ├── readme.md │ ├── sound_off.js │ ├── sound_off_2.js │ ├── sound_off_3.js │ └── vue │ │ └── index.html ├── lesson5 │ ├── async_function.js │ ├── flight_schedule_1.js │ ├── flight_schedule_2.js │ ├── flight_schedule_3.js │ ├── indirect.js │ ├── indirect_call.js │ ├── kitchen_workflow_async.js │ ├── readme.md │ ├── type_array_sample.js │ ├── type_boolean_sample.js │ ├── type_number_sample.js │ ├── type_object_sample.js │ └── type_string_sample.js ├── lesson6 │ ├── scan_files_async.js │ ├── scan_files_sync.js │ ├── write_file_async.js │ └── write_file_sync.js ├── lesson7 │ ├── all_words.json │ ├── error_data.json │ ├── github_index │ │ ├── easy_vue.html │ │ ├── index.html │ │ └── public │ │ │ ├── style.css │ │ │ └── vue.min.js │ ├── homework_readme.md │ ├── homework_sample.js │ ├── package.json │ ├── read_a_json_file.js │ ├── readme.md │ ├── sound_off.js │ ├── test_data │ │ └── data.json │ └── write_a_json_file.js └── lesson9 │ ├── chain_function_call.js │ ├── github_index │ ├── index.html │ └── public │ │ ├── style.css │ │ └── vue.min.js │ └── readme.md ├── topics ├── Git实战笔记.md ├── JS函数.md ├── JavaScript的语法学习指引.md ├── MAC-Terminal-command-list.md ├── Win-Command-list.md ├── callback函数的设计学.md ├── js重要语句.md ├── 两种定义函数方式的差异.md ├── 了不起的axios(http).md ├── 代码就是由这些组成的.md ├── 作品征集.md ├── 函数 - 定义完就执行.md ├── 匿名函数使用技巧.md ├── 变量命名简明技巧.md ├── 同步函数的两种返回结果的方式.md ├── 图床教程.md ├── 在Heroku上快速部署自己的JS项目.md ├── 如何从主项目更新fork的项目.md ├── 如何在终端执行代码.md ├── 如何查看git push和pr的提交结果.md ├── 安装nvm.md ├── 定义变量.md ├── 相对路径.md ├── 第一个webapp.md ├── 第一次pull-request.md ├── 第一次pull-request错误汇总.md ├── 第一次使用Git.md ├── 第一次使用JSON.md └── 让github-wiki变成图床.md └── webapp ├── package-lock.json ├── package.json ├── src ├── app.js ├── bin │ └── www ├── config │ ├── index.dev.js │ ├── index.js │ └── index.pro.js ├── middleware │ └── courseInfo.js ├── public │ ├── images │ │ └── background.jpg │ ├── libs │ │ ├── bootstrap-3.3.7-dist │ │ │ ├── css │ │ │ │ ├── bootstrap-theme.css │ │ │ │ ├── bootstrap-theme.css.map │ │ │ │ ├── bootstrap-theme.min.css │ │ │ │ ├── bootstrap-theme.min.css.map │ │ │ │ ├── bootstrap.css │ │ │ │ ├── bootstrap.css.map │ │ │ │ ├── bootstrap.min.css │ │ │ │ └── bootstrap.min.css.map │ │ │ ├── fonts │ │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ │ ├── glyphicons-halflings-regular.woff │ │ │ │ └── glyphicons-halflings-regular.woff2 │ │ │ └── js │ │ │ │ ├── bootstrap.js │ │ │ │ ├── bootstrap.min.js │ │ │ │ └── npm.js │ │ ├── jquery-3.2.1.min.js │ │ └── vue.min.js │ └── stylesheets │ │ ├── anim.css │ │ ├── github-markdown.css │ │ └── style.css ├── request.js ├── routes │ ├── homework.js │ ├── index.js │ ├── sayToTeacher.js │ ├── studentWorks.js │ ├── topics.js │ └── words.js └── views │ ├── _head.ejs │ ├── _header.ejs │ ├── _nav.ejs │ ├── _slider.ejs │ ├── error.ejs │ ├── homework.ejs │ ├── homeworkList.ejs │ ├── index.ejs │ ├── sayToTeacher.ejs │ ├── sayToTeacher2.ejs │ ├── studentWorks.ejs │ ├── topics.ejs │ └── words.ejs └── test ├── routes_api.test.js └── routes_page.test.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore Mac OS desktop services store 2 | .DS_Store 3 | package-lock.json 4 | node_modules 5 | dist 6 | .vscode 7 | script/result 8 | script/teams.md -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 美好的回忆 2 | 3 | 该项目记录了一群小白学习js的过程，现封存该项目供所有人回忆。 4 | 5 | 感谢大家的努力 6 | 7 | 请[点这里](https://js.7xinsheng.com/)访问我们的家！ 8 | 9 | ![](https://ws4.sinaimg.cn/large/006tNbRwgy1fuzrn9i6vvj3076076jru.jpg) 10 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-hacker -------------------------------------------------------------------------------- /homework/lesson1/ElizabethZhouli.md: -------------------------------------------------------------------------------- 1 | **#** **learning-javascript lesson 1**  2 | 3 | **1. 类比代码执行流程** 4 | 5 | 方式：用“银行为用户开户这一”具象业务架构“一对一抽象成“JS运行环境框架“，框架包含：JS运行环境［浏览器运行环境（v8引擎＋内置环境）＋Nodejs运行环境（v8引擎＋内置环境）］——第三方库——JS代码 6 | 7 | **2. 运行环境** 8 | 9 | 包含浏览器运行环境和Nodejs运行环境 10 | 11 | **3. V8引擎** 12 | 13 | 核心：用来执行代码 14 | 15 | **4. 编译器/解释（执行）器** 16 | 17 | 是V8引擎的组成部分，用来处理和解析代码 18 | 19 | **5. 内置库** 20 | 21 | 是运行环境所提供的一组服务，用来实现代码的功能 22 | 23 | **6. 第三方库** 24 | 25 | 付费或开源的各类服务于JS的工具库 26 | 27 | **7. 学习JS的方向** 28 | 29 | 有难度：变化快＋无边界，但也有套路从小白到高手： "掌握编程语言，用编程方式调用服务来完成你的需求"—— “了解和掌握重要的服务能力，使其能服务你的业务”—— “善于比较服务／技术之间的差异性，用最好的方式实现自己的业务”。 30 | 31 | 加油！ -------------------------------------------------------------------------------- /homework/lesson1/Learner-Chen.md: -------------------------------------------------------------------------------- 1 | Javascript第一次课程总结 2 | 3 | 第一次上课，主要是对于编程感兴趣。现在社会的互联网、人工智能持续火爆，也是大势所趋。所以一只很感兴趣。看到新生大学改版后开课，就第一时间报了名去学习。 4 | 5 | 徐老师讲解JS时，通过对生活中常见的银行开户流程来讲解，通过一步一步引导，初步建立起有关Js代码执行流程的意识。类比优化后的银行开户流程，了解JS代码运行环境，JS运行环境主要分为前端-浏览器运行环境和后端-Nodejs运行环境。但是不一样的内置服务，运行环境之间有了显著性的差异。V8引擎是运行环境中执行代码的阶段。 6 | 7 | JS语言是解释性语言，是边编译边执行同步进行，和银行开户最初始阶段相同。不像C/C++语言，是编译型语言，先编译，再进行解释执行。这点是不相同。因此二者在处理效率以及开发效果上迥然不同，各有特色。 8 | 9 | 内置库与第三方库是有关联的。内置库好比家庭内部自有的图书室，第三方库是外界社会共同开发共同享有的社会公共图书馆。浏览器和Node内置库方面有很多不同，但二者都有JS内置对象。 10 | 11 | JS方面，徐老师给我打开了一扇门，当下和徐老师好好学习，一步一步摸索练习。养成自己的编程思想，有自己的独特性。 12 | -------------------------------------------------------------------------------- /homework/lesson1/WuGaoxing.md: -------------------------------------------------------------------------------- 1 | 运用下面这些关键词，把你知道的写出来 2 | 1. 类比代码执行流程：医生诊治病人的过程，学生上学的顺序，社会运行的次序 3 | 2. 运行环境：由不同事物组成的特定套路，环境不同 套路不同 4 | 3. V8引擎： 一个隐藏很深 较底层的平台 提供机器与代码的交互 5 | 4. 编译器/解释（执行）器 ： 对代码转换成机器可识别的二进制，机器安装二进制执行 6 | 5. 内置库：官方内含的套件礼包，较正式和常用 7 | 6. 第三方库：非官方定制化的，超级大礼包，无好坏之分，全看你是否能用到 8 | 7. 学习JS的方向：入门 多问自己什么最重要，不能钻牛角尖搞研究。实用为主。 -------------------------------------------------------------------------------- /homework/lesson1/XGunn-lesson01.md: -------------------------------------------------------------------------------- 1 | \# 第一课总结 2 | 3 | \## 1.类比代码执行流程 4 | 5 | 以银行受理客户业务流程类别代码执行流程。 6 | 7 | \## 2.运行环境 8 | 9 | JS运行环境包括浏览器运行环境和Nodejs运行环境，运行环境是用来处理和执行代码并输出结果。 10 | 11 | \## 3.V8引擎 12 | 13 | V8引擎高效执行代码，Google开发 14 | 15 | \## 4.编译器/解释（执行）器 16 | 17 | 编译器用来分析词法、语法、语义、优化代码 18 | 19 | 解释器用来解释代码、执行代码 20 | 21 | \## 5.内置库 22 | 23 | js自带的工具，可以直接拿来使用。 24 | 25 | \## 6.第三方库 26 | 27 | 外部机构提供的工具，可调用。 28 | 29 | \## 7.学习JS的方向 30 | 31 | 学习编程语言，解决业务需求。 32 | 33 | 注意辨析工具差异。 -------------------------------------------------------------------------------- /homework/lesson1/ZhengChao.md: -------------------------------------------------------------------------------- 1 | ## JavaScript Lesson1 学习心得 2 | 3 | #### JS两大构成部分 4 | 5 | ##### JS代码 6 | 7 | 1. ###### 两个概念：编译型语言（比如C,C++）和解释性语言（JS） 8 | 9 | 2. ###### JS代码属于解释性语言 10 | 11 | 3. ###### 从解析器看来，要处理的代码不仅包括JS代码，还包括把内置库，第三方库服务整合的代码集合 12 | 13 | ##### JS运行环境和第三方库 14 | 15 | 1. ###### 两大运行环境分别是浏览器和NodeJS 16 | 17 | - ###### 浏览器运行环境可用于前端 18 | 19 | - ###### NodeJS运行环境可用于后端 20 | 21 | 2. ###### 单个运行环境的构成： 22 | 23 | - ###### V8引擎：编译解析代码 24 | 25 | 26 | - ###### **内置库** 27 | 28 | - ###### **第三方库** 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /homework/lesson1/baoguoqiang.md: -------------------------------------------------------------------------------- 1 | #类比代码执行流程 2 | 首先引入生活中在银行开户的这么一个流程，讲解了在开户过程中所需求的种种，我们把这些种种叫做开户环境；一步一步进行优化处理，最后达到满意的效果； 3 | 从这个生活中的例子引导到javascript的运行环境； 4 | #运行环境 5 | javascript的运行环境分为：浏览器运行环境；NodeJS运行环境 6 | 这两种运行环境都是由内置服务和V8引擎，第三方库组成 7 | #V8引擎 8 | V8引擎就是运行环境中的一个预处理 9 | # 编译器/解释（执行）器 10 | 在javascript的运行环境里，编译器和解释器是合二为一的，一边编译一边解析； 11 | #内置库和第三方库 12 | 这两个库我们在编程的时候都是要学会调用的，要熟练掌握技巧 13 | #学习JS的方向 14 | 个人是小小白，之前从未接触过编程，刚开始的时候，直播还能看的懂，到作业部分简直就是蒙圈，还好有老师写的非常详细的文档， 15 | 一开始就是一点方向也没有就像无头的苍蝇乱飞，文档要仔仔细细的看才可以，边看边实操效果更好。 16 | 在这里也非常感谢王云飞同学的帮助的鼓励，非常耐心的去指导我这个小小白。 17 | 由于种种原因到现在才交第一次的作业，可能是最后一个提交的，但是我不想放弃，现在一有时间就是在看文档和书籍，谢谢老师的指点 -------------------------------------------------------------------------------- /homework/lesson1/caijinpeng.md: -------------------------------------------------------------------------------- 1 | ## 第一次作业 2 | ### 提交人：Marshalcy 3 | 4 | #### 代码执行环境 5 | 我用过调用各种库（内置库和第三方库）写好我的代码后，打包成工程代码，发给解释器；这个过程好比是我去银行开户，通过大堂经理等人的帮助后，将我的个人信息完整准确的填写在申请表上，然后交给银行柜台员工，如果信息表信息无误，则通过申请，柜员发卡给我；如果还有错误，ta会将信息表给我，告诉我哪里错了，需要重新填写，好比解释器报错。 6 | 7 | #### 运行环境 8 | 好比是饭店的后厨，里面包含洗菜、切菜、炒菜的，最后将炒好的菜交给前台服务人员。 9 | 10 | 11 | #### V8引擎 12 | 后厨工作人员，炒菜的，将切好的菜交给他，他炒好了装盘拿给你或者炒糊了，也给拿给你。 13 | 14 | 15 | #### 编译器和解释（执行）器 16 | 17 | 同v8引擎， v8引擎就是javascript的编译器和解释器。区别在于，编译型语言的编译器和解释器是分开的，相当于先洗菜，切菜；切好后交给解释器，炒菜； 18 | 而js的编译器和解释器是在一起的，一个人完成洗菜、切菜、炒菜。 19 | 20 | #### 内置库 21 | 就是后厨内提供的，已有的服务，比如煤气啊、菜刀啊等等和炒菜相关的服务。 22 | 23 | #### 第三方库 24 | 后厨内不提供的服务，外面人提供的服务，比如菜刀不够快，需要的磨刀服务。电话预约送菜上门服务等等。 25 | 26 | #### 学习js的方向 27 | 先学习如何使用内置库和第三方的库，帮自己完成自己的需求。 28 | 然后具体掌握，了解内置库和第三方库，能调用他们服务我的业务需求。 29 | 最后能根据业务需求，知道什么时候用什么样的库能最好的完成我的需求。 -------------------------------------------------------------------------------- /homework/lesson1/chaigaoping.md: -------------------------------------------------------------------------------- 1 | 2 | 1.类比代码执行流程 3 | 代码传入到编译器和解释器之后，经过编译/解释处理，然后输出结果。 4 | 5 | 2.运行环境 6 | 运行环境就是能够使代码条用内置服务的一个环境，里面包含了两个运行环境：浏览器运行环境和nodejs运行环境。两者都有V8引擎，它可以理解为一个对代码进行预处理和执行的黑盒子。 7 | 8 | 3.编译器/解释（执行）器 9 | 一个是对我们的代码进行分析词法、语法、语义、优化代码，另外一个是解释代码、执行代码。 10 | 11 | 4.内置库 12 | 某种核心功能的实现集合。 13 | 14 | 5.第三方库 15 | 可以优化核心功能的集合。 16 | 17 | 6.学习js的方向 18 | 因为我这份作业是在开课后的20天，31号才补交的。从过去三周的经验来看，除了听老师的课只外，还要投入时间去玩代码。去把基础补上来。还有就是要和一群人一起走。最后是要有很强的目标感。自己之前就尝试过学编程，但是失败了。这次重新捡起来，发现自己对于技术还是没有死心。既然没有死心，那就便有了希望。 -------------------------------------------------------------------------------- /homework/lesson1/chenzidong.md: -------------------------------------------------------------------------------- 1 | 第一课 git到的JS知识 2 | 3 | # 初步了解，整体印象。 4 | 通过银行开户的类比，把JS运行的流程，一些大家都熟悉的概念，送到大家的认知里。印象最深的是开户窗口，预处理，和执行，对应JS里的 网页窗口，编译器，和执行器。还有流程可以不断优化，以达到最优的解决问题的方案。 5 | 6 | #运行环境 7 | 在我看来就像基础设施，里面有一些内置或第三方的服务和工具。 8 | 9 | #V8引擎 10 | 因为JS是一种解析型语言。要边解析边执行，速度就会比较慢。但它服务的对象又是直接面对用户的，要求提高速度，就需要有一种工具来加速把代码和其它数据库整合成机器语言。 11 | 12 | #编译器/解释（执行）器 13 | 前者把中间文件，解析成机器语言，后者执行机器语言代码。在js的运行环境里，编译器和解释器是合二为一的，边编译边执行。 14 | 15 | #内置库/第三方库 16 | 运行环境内部的服务/运行环境外部的服务 17 | 不同的运行环境，内置服务是不一样的。 18 | 19 | #学习JS的方向 20 | 先学会习编程的方式解决问题。 然后学会不同工具之间的差异，更好的优化服务。 21 | 22 | 23 | 第一次在浏览器上运行代码并弹出自己名字的对话框，很高兴！ -------------------------------------------------------------------------------- /homework/lesson1/cuimiao.md: -------------------------------------------------------------------------------- 1 | #小小白崔淼的学习之路——lesson 1 2 | 3 | 1. 类比代码执行流程 4 | 按照老师的类比，就好像是去银行办卡，先要填写表单（输入代码），然后提交审核（编译器编译），办理业务（执行器执行代码），最终拿卡（反馈结果）。此外，银行还提供了内部服务（内置库），还有第三方公司提供的便捷服务（第三方库）。 5 | 6 | 2. 运行环境 7 | JS的运行环境分为”浏览器”和”node”，每种运行环境有着不同的内置服务（内置库）和第三方库。这就好比是每个人周边的环境都不一样，有着不同的（有时也有重叠）内置服务和第三方服务。 8 | 9 | 3. V8引擎 10 | V8引擎为JS语言中负责预处理和执行代码的部分。 11 | 12 | 4. 编译器/解释（执行）器 13 | 应是V8引擎，对代码进行编译和执行。 14 | 15 | 5. 内置库 16 | 每种运行环境中，直接可供应用的内置库。 17 | 18 | 6. 第三方库 19 | 每种运行环境中，外部的可供应用的外部资源库 20 | 21 | 7. 学习JS的方向 22 | 焦点集中在我们写的代码上，我当前的目标就是熟练运用代码，熟练掌握编程语言。 -------------------------------------------------------------------------------- /homework/lesson1/dangfeipeng.md: -------------------------------------------------------------------------------- 1 | ### 用类比的方式推导 JS 框架 2 | 3 | 徐老师用“银行开户流程”的四次改进，由浅入深、层层递进地推导出 JS 框架，通过类比让我们借助熟悉的“银行开会流程”在很短的时间内对陌生的 JS 框架产生了感性认识，了解了主要的组成部分以及各部分之间的关系，形象生动。 4 | 5 | ### 运行环境 6 | 7 | 举个不太恰当的比喻，JS 运行环境就像智能厨房的控制中心，它有各种原材料存储位置以及使用说明（相当于内置对象），也有捡菜、洗菜、切菜、炒菜等基本功能说明（相当于内置库），以及一个菜谱制作器（相当于 V8引擎），一旦收到客户的要求（相当于代码），菜谱编制器就根据客户的要求编制菜肴的加工说明（本地代码），最后厨师机器人根据加工说明将具体食材做成成品菜肴，根据菜肴的基本分类，控制中心又分为中餐和西餐两大类，同时当控制中心的基本功能无法满足客户要求时，比如日料，就可以借助其他第三方来协作完成（相当于第三方库），这其中菜谱编制器是核心，由它来负责整体的运行、控制和调度，可以形象地类比为 V8引擎。 8 | 9 | ### 学习 JS 的方向 10 | 11 | 大致的路线图是： 12 | 13 | - 学习：掌握编程语言，用编程的方式调用服务来完成你的需求，我的理解是掌握基础知识，包括语法、常用的内置对象； 14 | - 提高：了解和掌握重要的服务能力，使其能服务你的业务，我的理解是重点搞清内置库，其次是第三方库； 15 | - 进阶：善于比较服务/技术之间的差异，用最好的方式实现你的业务。 16 | -------------------------------------------------------------------------------- /homework/lesson1/dengxy0907.md: -------------------------------------------------------------------------------- 1 | 第一次课作业 2 | =========== 3 | ### 类比代码执行流程 4 | > 老师通过银行开户流程类比了代码，代码就是一个个功能的体现，一个个具体的功能通过翻译让计算机执行，达到获取结果的目的 5 | ### 运行环境 6 | >运行环境是能够执行代码的环境 7 | ### V8引擎 8 | > 一个运行代码的黑盒子 9 | 10 | ### 编译器／解释器 11 | > 一个把代码翻译给机器的东西 12 | 13 | ### 内置库 14 | > 一个装有js代码的背包 15 | ### 第三方库 16 | > 一个额外选择的武器库 17 | ### 学习js的方向 18 | > 到这已经完全忘记，对我自己而言，就是通过编辑代码、调用库来实现自己的需求。 19 | 20 | -------------------------------------------------------------------------------- /homework/lesson1/donglili.md: -------------------------------------------------------------------------------- 1 | ## 第一次作业 2 | 3 | 执行代码就好像去银行办开户业务。本质上就是输入信息、获得结果。 4 | 5 | 而运行环境相当于银行，就是我们要“办事”的地方，也可以理解我们要执行代码的地方。我们的代码是针对运行环境而写的，只有在运行环境下才能够正确执行。 6 | 7 | V8引擎就是完成代码检查和执行的地方，在初始代码经过内置服务库和第三方服务库重新整合代码后，会送入这里执行。 8 | 编程语言大致上分为两种，一种是编译型语言，这种是先通过编译器将代码编译成可执行的命令，之后送由执行器执行。他们是统一编译之后在执行，所以开发效率低，因为每改动一些代码都需要重新编译。但相对的通过执行器运行的时候就会快很多。而解释性语言是一条一条的进行，编译一条执行一条，所以它的开发效率高，因为每次做了改动，不需要全部代码都进行编译，相对的，运行效率低，因为每运行一条代码都需要编译一次。 9 | 10 | -------------------------------------------------------------------------------- /homework/lesson1/fanliao.md: -------------------------------------------------------------------------------- 1 | 新生大学第一次JS课作业 2 | 3 | 1. 类比代码执行流程 4 | 老师以一般的银行开户流程作为例子，类比了我们从代码的输入到编译执行到输出结果，使一个抽象的过程具体的展现在我们眼前。 5 | 6 | 2. 运行环境 7 | JS运行环境分为浏览器环境和Node环境，不同的环境对应不同的的内置库和第三方库，但内置库中都有JS内置对象。 8 | 9 | 3. V8引擎 10 | V8引擎是业务核心，是执行部分。 11 | 12 | 4. 编译器/解释（执行）器 13 | 编译型语言的特点是：代码执行考虑高，但是开发效率低；解释性语言代码执行效率低，但是开发效率高。 14 | 15 | 5. 内置库 16 | 内置库就是指不同的运行环境下我们的代码可以调用以实现某些功能的工具。 17 | 18 | 6. 第三方库 19 | 第三方库是有别于内置库的一个开放的外部资源，更好的帮助我们达成目标，它不断更新，不断为我们提供更好的服务。 20 | 21 | 7. 学习JS的方向 22 | 光说不练假把式，学习JS应该多练习，在实践中发现新的收获。 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /homework/lesson1/fengkai.md: -------------------------------------------------------------------------------- 1 | 2 | 1.类比代码执行流程 3 | 4 | JS运行环境框架类比于银行体系的业务构架； 5 | 浏览器运行环境相当于普通用户的开户环境； 6 | Nodejs运行环境相当于VIP用户的开发环境； 7 | V8引擎相当于银行的业务核心； 8 | 内置库=内置服务； 9 | 第三方库相当于第三方服务； 10 | JS代码相当于用户。 11 | 12 | 2.运行环境 13 | 14 | 提供集预处理、执行于一体的核心业务处理单元，同时还提供内置服务。 15 | 16 | 3.V8引擎 17 | 18 | 计算黑箱 19 | 20 | 4.编译器／解释（执行）器 21 | 22 | 一边编译一边解释，解释性语言，开发效率高，运行效率低。 23 | 24 | 5.内置库 25 | 26 | 系统内置封装的代码 27 | 28 | 6.第三方库 29 | 30 | 外部调用的封装代码 31 | 32 | 7.学习JS的方向 33 | 34 | web前端开发 35 | -------------------------------------------------------------------------------- /homework/lesson1/haohu.md: -------------------------------------------------------------------------------- 1 | ###1. 类比代码执行流程 2 | 3 | 代码 + 库(内置库&第三方库) -> 运行环境(浏览器 or NodeJS) -> 执行结果 4 | 种子 + 养分(水&阳光空气) -> 土壤 -> 大树 5 | 6 | ###2. 运行环境 7 | 8 | 可能不准，但能帮助理解： 9 | - 电脑硬件是操作系统的运行环境 10 | - 操作系统是应用软件的运行环境 11 | - EXCEL 是 .xls 的运行环境 12 | - flash player 是 ActionScript 的运行环境 13 | - Adobe Air 也是 ActionScript 的运行环境 14 | - 浏览器 是 JS 的运行环境 15 | - NodeJS 也是 JS 的运行环境 16 | - JVM 是 Java 的运行环境 17 | 18 | ###3. V8引擎 19 | 20 | - Google 出的、高效的JS解释（执行）器 21 | 22 | ###4. 编译器/解释（执行）器 23 | 24 | - 编译器 是翻译，翻译完了之后你去阅读 25 | - 解释器 是口译，一边翻译一边就说出来 26 | 27 | ###5. 内置库 28 | 29 | - JavaScript 的官方库，一般是用以实现普遍性的底层的需求 30 | 31 | ###6. 第三方库 32 | 33 | - 非 JS 官方库，一般是用以实现某垂直、细分领域的需求 34 | 35 | ###7. 学习JS的方向 36 | 37 | - 万向 38 | -------------------------------------------------------------------------------- /homework/lesson1/huangqi.md: -------------------------------------------------------------------------------- 1 | ## 总结 ## 2 | 3 | **2017年8月8日**我跟随老师学习了JavaScript的第一节课，认识了几个概念：“JavaScript的运行环境、V8引擎、编译器、执行器、内置库、第三方库” ，还有一个类比代码执行流程，也打开了我从JavaScript的小小白走向JavaScript菜鸟的大门。 4 | 5 | **代码执行流程** 6 | 7 | 老师生动的用了一个银行开户的类比，让我们知道了代码的执行流程，类比中，我们编写的代码就是一个开户申请单，我们把这个申请单（代码）交给银行（运行环境），银行（运行环境）方面就对这个申请单检查（编译器编译）和执行（执行器），最后返还结果给我们。 8 | 9 | **运行环境** 10 | 11 | 运行环境，就是一个能够使代码调用内置服务的一个环境，里面包含了两个小运行环境；一个是浏览器运行环境，另外一个就是nodejs运行环境。 12 | 13 | **V8引擎** 14 | 15 | 对我们的代码进行预处理和执行的一个黑盒子。 16 | 17 | **编译器/解释（执行）器** 18 | 19 | 一个对我们编写的代码进行翻译的工具，执行器就是对编译器解释完的代码进行执行。 20 | 21 | **内置库** 22 | 23 | 一个支撑各自的业务而设定的库，而且必不可少的。 24 | 25 | **第三方库** 26 | 27 | 支持我们把业务做得更好，更漂亮的库。 28 | 29 | **学习JS的方向** 30 | 31 | 紧跟老师的步伐，和研究JavaScript权威指南，掌握JS编程语言，并用编程的方式调用服务来完成自己的需求。 -------------------------------------------------------------------------------- /homework/lesson1/huangxiaohui.md: -------------------------------------------------------------------------------- 1 |  2 | javascript第一节课总结 3 | 4 | 5 | 1.1.类比代码执行流程 6 | 7 | 以银行开户流程为例，将优化后银行开户流程——分为普通用户和VIN用户两大业务模块，类比JS的浏览器和NodeJS这两种运行环境下，代码调用内 8 | 置库进行进行编写完成后输入到运行环境进行编译后，再输出到CPU进行执行的流程。 9 | 10 | 2.运行环境 11 | 12 | 相对JS来说，由内置库和V8引擎等模块组成的浏览器和Node运行环境 13 | 14 | 3.V8引擎 15 | 16 | 对代码编译后，并执行代码的核心 17 | 18 | 4.编译器/解释（执行）器 19 | 20 | V8引擎中对代码进行编译和执行的一个模块 21 | 22 | 5.内置库 23 | 24 | 由浏览器和Node内置提供给编写代码的一些功能 25 | 26 | 6.第三方库 27 | 28 | 由浏览器和Node两个运行环境以外的第三方提供编写代码的附加功能 29 | 30 | 7、学习JS的方向 31 | 32 | 掌握以老师教的ES6编程语言 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /homework/lesson1/huxiaodan.md: -------------------------------------------------------------------------------- 1 | ## 1.类比代码执行流程 2 | 类比银行开户流程。用户向银行开户环境提交申请，银行通过内置服务、预处理和执行后，将结果反馈给用户。 3 | ## 2. 运行环境 4 | 运行环境提供集预处理、执行于一体的核心业务处理单元，同时还提供内置服务方面用户的业务办理。 5 | JS运行环境有浏览器运行环境和Node运行环境。 6 | ## 3. V8引擎 7 | V8引擎是指对代码进行预处理和执行。 8 | ## 4. 编译器/解释（执行）器 9 | 编译器对代码进行词法、语法和语义的分析，以及优化代码。 10 | 解释（执行）器对代码进行解释和执行。 11 | ## 5. 内置库 12 | 内置库是一组内部服务。 13 | 浏览器的内置库有JS内置对象、WebAPI、WebGL、HTTP、WebRTC、canvas等。 14 | Node的内置库有JS内置对象、Node API等。 15 | ## 6. 第三方库 16 | 第三方库是由其他机构或个人编写的，有助于开发的服务。 17 | 浏览器的第三方库有jQuery、Vue、AngularJS、React等。 18 | Node的第三方库有Express、Koa、Webpack、Promise等。 19 | ## 7. 学习JS的方向 20 | 学习JS，前端和后端都可以完成。要了解自己学习的语言，熟练掌握内置库和第三方库，用最恰当的服务实现业务。 -------------------------------------------------------------------------------- /homework/lesson1/huyong.md: -------------------------------------------------------------------------------- 1 | 编程第一课总结 2 | #内容分为三个部分 3 | ##第一部分是对与之前预习作业的回顾，点出了大家在写代码的时候常犯的一些错误，比如写代码的时候， 4 | 需要用全英文的书写格式，尤其是像引号顿号等的使用 5 | ##第二部分是代码学习的引导和未来的路如何走，开头给了我们一个整个编程学习的准则就是”干“， 6 | 然后通过银行的开户流程类比来代码输入得到结果，给出了运行环境：包括浏览器和nd.js的运行环境， 7 | 环境，在介绍这俩个环境的时候给出了编译器和解释器，对于环境我们就可以看待成一个黑盒， 8 | 不用管他如何执行，我们只需要写出正确的代码，然后检验自己的代码，然后通过内置服务的区别 9 | 讲解了浏览器和nd的区别，同样的代码在不同的环境下是得出不同的结果的，无论是浏览器和nd 10 | 都有着js内置库，然后给出了第三方库的解释，最后进行了演示。 11 | ##第三部分，我们学习编程之后的路该 如何走，分为三步走，第一步学习，掌握编程语言，用编程 12 | 方式调用服务来完成你的需求，第二步提高，了解和掌握重要的服务能力，使其能服务你的业务： 13 | 需要对内置库和第三方库有一个深入的了解，第三步进阶，善于比较 14 | 服务/技术之间的差异性，用最好的方式实现你的业务，就是比较各种库的差异性，选出最适合你业务的库， 15 | 16 | -------------------------------------------------------------------------------- /homework/lesson1/ianyang.md: -------------------------------------------------------------------------------- 1 | 【第一次作业】写一篇总结 2 | 3 | 1. 类比代码执行流程 4 | 老师以银行开户流程为类比，也可套用其他服务型行业的标准流程，比如物流、零售。这个类比让我认识到，从输入代码到编译执行到输出结果，不仅是商业社会的具体运作方式，也可类比人与人的沟通模式，难怪有“人机对话”这样的比喻。 5 | 6 | 2. 运行环境 7 | JAVA的运行环境便是指一套完整服务方案的构成要素，它们相互之间有序列也有逻辑和因果关系。其中第三方服务类比的代码库非常关键，这位整个代码进入应用实现了无边无际的拓展性。 8 | 而运行环境必须分清是在浏览器环境还是Node环境下，因对应的内置库是独立的。 9 | 10 | 3. V8引擎 11 | 便是业务核心，我的理解，也就是最终要实现的功能。 12 | 13 | 4. 编译器/解释（执行）器 14 | 指C++这类更底层的语言通过编译器与执行器的分离，实现了高运行效率但影响开发效率；解释器则反之； 15 | Java语言是通过混合了编译器与解释器来执行代码，这样一个黑盒子究竟如何解释语言不重要，重要的是理解它会如何执行出我们想要的结果，即实现功能。 16 | 17 | 5. 内置库 18 | 内置库是指在不同的运行环境下所内置的不同的可调用实现对应功能的现有代码库（不知这么理解对不对？） 19 | 20 | 6. 第三方库 21 | 第三方库一直会有更新，是开源代码工作者们的集体智慧和贡献（对吗？），而熟悉某一个第三方库能大大帮助我们根据需要实现的功能来选择最合适的库。 22 | 23 | 7. 学习JS的方向 24 | 不需要追求新版本；动手干，边写边练，实践是王道。 -------------------------------------------------------------------------------- /homework/lesson1/jianglin.md: -------------------------------------------------------------------------------- 1 | 1. 类比代码执行流程：代码执行流程就像银行开户，要先确认信息准确（编译）再进行开户操作（执行），对于JavaScript，是边编译边执行，易开发难执行；对于C/C++，是先编译后执行，难开发易执行。 2 | 2. 运行环境：运行环境是代码的环境，有各种服务，就像我们生活的环境，也可以区分成各种服务。这个概念要在编程中进一步理解。 3 | 3. V8引擎：V8引擎是运行环境的一部分，是用来执行代码的。 4 | 4. 编译器/解释（执行）器 ：编译器+解释（执行）器是V8引擎的两个功能，具体的原理现在不了解。 5 | 5. 内置库：运行环境本身提供的服务。 6 | 6. 第三方库：第三方公司等提供的数量庞大的库，可供使用。 7 | 7. 学习JS的方向：关于编程，上学时接触过C++和汇编，毕业后再没有过应用。这次学习JavaScript是当做小白学习，一定要专注，专注于老师的任务，网络的内容偶尔可以看看，切勿沉迷于最新的库/信息等。就像上学时学习制图，最重要的是如何制图的原理，而不是纠结于用什么软件来画图，所以初学的时候，图板和CAD04才是最好的朋友。在有一定基础之后，再研究其他的库和已经学习的库有什么区别，逐步掌握更广泛更深入的应用。 -------------------------------------------------------------------------------- /homework/lesson1/leizhen.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 用银行开户流程类比代码执行过程，通过细分项目和需求，一步一步优化流程，来完成一个完整的框架结构。 4 | 5 | 我用炒菜的过程来说明我对几个概念的理解（我想了很久，但还是不够贴切） 6 | 7 | 厨房是一个大的集合：【锅， 燃气灶， 调味料， 食材， 道具， 砧板， etc 】 8 | 9 | 运行环境：最大的载体，这是最基本的工具。做不同的菜就要用不同的锅一样。煎东西要用平底锅，炒菜的话，就用最平常的大锅子。浏览器运行环境和NodeJS运行环境我觉得和这个比喻类似。 10 | 11 | V8引擎：核心部件。类比燃气灶上要点火一样，对食物进行加热（这是核心工具） 12 | 13 | 内置库：一开始就包含的最基本的东西，管你用不用都在那里。比如：调味料。做菜就是为了好吃啊，为了追求菜的原汁原味，也可以不用的 14 | 15 | 第三方库：不是必需的，但有的话会很方便。做菜有火就行了，但以前的烧柴火做菜，和现在的天然气做菜。肯定是现在更方便啊！ 16 | 17 | 编译器/解释器：切菜和炒菜的过程就像编译器，炒菜的过程就像解释器。先把一个食材处理好，才好进行下一步的炒菜。而炒菜的过程就简单多了，直接炒就好了，不用处理食材。JS像炒菜的过程，没有切菜直接丢进锅里，当然开发效率高，运行效率低了嘛。 18 | 19 | 20 | 学习JS的方向：我觉得就和做新菜一样。在了解的基本的炒菜过程后（基础），就去多看看别人的菜谱，把菜fork到自己的锅里，自己试一试，味道做得不错了，就可以按照当地人的口味自己进行魔改了。该多了就会对味道有了更深入的了解了。JS也应该差不多，多看看别人的项目，copy／paste 没有提高的。 21 | -------------------------------------------------------------------------------- /homework/lesson1/linxiyao.md: -------------------------------------------------------------------------------- 1 | 2 | 8月8日第一节课，听完感觉秒懂，到做作业写总结却有点傻眼，看来感觉靠不住，于是听了一遍回放，试试用自己有限的理解来描述。 3 | 4 | 代码执行流程类似于写说明文的过程：代码就像各种特定素材，先输入到大脑，经过大脑这个黑盒进行梳理、阐释（编译、解析），最后输出文章（结果）。两者都有一定的格式，运用（运行）得当时都可以输出稳定且通用的结果，便于交流。 5 | 6 | 运行环境，是供代码调用、支持代码起作用的的特定环境。JS运行环境有浏览器运行环境、node运行环境。运行环境类似于作者写作时所处的环境总和，比如可以是书房（包括笔记本，书桌椅，大脑等），也可以是卧室（包括笔记本，床，大脑等）。 7 | 8 | JS运行环境包含内置库和V8引擎，内置库类似于作者头脑中已有的稳固知识，V8引擎相当于思考，可以调动已知库。第三方库就像Google、wiki、图书馆等，延伸了已知，提供了协作，也减轻了存储负担。而大脑就像解释器吧，你输入红橙黄绿青蓝紫，它返你一个彩色的世界。我不是色盲，我想用JS的大脑看世界。 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /homework/lesson1/lipengyu.md: -------------------------------------------------------------------------------- 1 | ## 第一次上课总结 2 | 3 | 本次课程以银行开户流程为例子，由银行的业务架构引出JS的**运行环境**框架，生动易于理解。 4 | ### JS运行环境 5 | 1. 浏览器运行环境 6 | * V8引擎 7 | * 内置库 8 | 2. Nodejs运行环境 9 | * V8引擎 10 | * 内置库 11 | 12 | 一句话：运行环境包含了**V8引擎**和**内置库**。其中，V8引擎可以理解为一个可以执行代码的黑盒子，内置库就是我们写代码时可以调用的内置服务。 13 | 14 | 另外，因为内置库的数量和种类有限，这时就要用到功能更加丰富的**第三方库**。 15 | 16 | ### 两种语言类型 17 | 1. 编译型语言 18 | 2. 解释型语言 19 | 20 | 刚开始的开户流程也是**类比代码的执行流程**。 21 | 22 | 编译型语言代码执行流程大致是：代码--编译器（负责分析词法／语法／语义等）---编译好的代码---执行器（负责解释代码／执行代码）---输出结果。 23 | 这种语言的特点是：代码执行考虑高，但是开发效率低。 24 | 25 | 解释性语言（比如JavaScript）是代码直接到**编译器／解释器**---输出结果，代码执行效率低，但是开发效率高。 26 | ### 学习JS的方向 27 | 认真和专注。 28 | -------------------------------------------------------------------------------- /homework/lesson1/liucheng.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson1/liucheng.jpeg -------------------------------------------------------------------------------- /homework/lesson1/liujun-sh.md: -------------------------------------------------------------------------------- 1 | # 第一课总结 2 | 3 | ## 1.类比代码执行流程 4 | 代码的执行流程就好比我们去银行办理银行卡，首先你需要填写表格（编写代码），当你在填写表格的时候发现需要打印身份证（打印机就好比内置库，你调用了打印机可以打印图片的功能），如果你还需要办理贷款业务，你需要证明机构用来证明自己有还款能力（证明机构就好比第三方库，可用用它出具的证明才说明自己有能力还款），表格填好后递交给大厅工作人员，大厅工作人员检查申请表格填写是否正确规范（这个过程就是一个预处理的过程），检查没有问题后转交给了窗口工作人员，由窗口工作人员进行征信及资格等校验（这一步就是执行的过程），校验完之后通过发卡/不通过驳回并告知为何不通过（代码输出成功/错误并显示错误信息）。 5 | ## 2.运行环境 6 | JS本身就是一个运行环境，在其内部又分为浏览器运行环境和Nodejs运行环境，运行环境是用来处理和执行代码并输出结果。 7 | ## 3.V8引擎 8 | V8引擎用来提高代码运行效率、运行速度 9 | ## 4.编译器/解释（执行）器 10 | 编译器用来分析词法、语法、语义、优化代码 11 | 解释器用来解释代码、执行代码 12 | ## 5.内置库 13 | 编程语言本身自带的工具，可以直接拿来使用。 14 | ## 6.第三方库 15 | 外部机构提供的工具，使用的时候，需要先导入进来，才能使用。 16 | ## 7.学习JS的方向 17 | 学习编程语言，使用编程调用服务来解决自己的个人需求或工作需求。 18 | 面对问题选择效率最高的工具来解决自己的需求。 -------------------------------------------------------------------------------- /homework/lesson1/liujun.md: -------------------------------------------------------------------------------- 1 |  2 | JavaScript第一课课后总结 3 | 4 | 1.类比代码执行流程 5 | 用银行开户的的流程类比代码执行的流程。用户类比代码，银行类比运行环境，开户流程中的审查、执行类比代码执行中的内置库和V8引擎。 6 | 再通过定义板块，环境、内置服务、业务核心、第三方服务。使得与编程流程达到逻辑一目了然。总体上理解了编程的实现过程。 7 | 8 | 2.运行环境 9 | 有web运行环境和Node运行环境二种。前端开发用浏览器运行环境，后端开发用node运行环境。 10 | 11 | 3、V8引擎 12 | V8引擎就是运行代码的。 13 | 14 | 15 | 4、编译器/执行器 16 | 编译器：1.分析词法 2.分析语法 3.分析语义 4.优化代码 17 | 执行器：1.解释代码 2.执行代码 18 | 19 | 5、内置库 20 | 是运行环境提供的一组服务，有利于我们更好的实现代码功能。 21 | 22 | 6、第三方库 23 | 由第三方提供的各种各样的服务，更好地促进我们的代码功能的实现。 24 | 25 | 7、学习JS的方向 26 | 小白阶段 27 | 谨记“掌握编程语言，用编程方式调用服务来完成你的需求。” 28 | 29 | 提高阶段 30 | “了解和掌握重要的服务能力，使其能服务你的业务。” 31 | 32 | 进阶阶段 33 | “善于比较服务/技术之间的差异性，用最好的方式实现你的业务。” 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /homework/lesson1/liuruyong.md: -------------------------------------------------------------------------------- 1 | #1. 类比代码执行流程 2 | 高级语言写的代码 > 编译后的中间代码 > 不同平台的机器码 > 机器指令 3 | 中央文件 > 官僚系统传递 > 各地根据当地情况做解读 > 群众去执行 4 | #2. 运行环境 5 | 运行时需要的支撑环境，运行依赖的库。 6 | #3. V8引擎 7 | wiki解释 8 | > V8在运行之前将JavaScript编译成了机器码，而非字节码或是解释执行它，以此提升性能。更进一步，使用了如内联缓存（inline caching）等方法来提高性能。有了这些功能，JavaScript程序与V8引擎的速度媲美二进制编译。 9 | 我的理解：v8引擎厉害的地方，方便代码书写的同时，没有降低代码执行的效率。 10 | #4. 编译器/解释（执行）器 11 | 编译器把高级语言编译为二进制文件，二进制文件加载到内存执行 12 | 解释器在运行时才进行代码的解析。 13 | #5. 内置库 14 | 只有安装相应环境就包含的支持程序运行的最小代码库 15 | #6. 第三方库 16 | 遵守相应规范开发的非官方代码库，实现官方库未实现的功能。库的质量由开发者能力决定。 17 | #7. 学习JS的方向 18 | 基础语法+常用库+编程思想 19 | 20 | -------------------------------------------------------------------------------- /homework/lesson1/lixiang.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 运行环境就像是一个人的大脑，负责处理接收到的信息，比如一条新闻，一个故事。 5 | 6 | V8引擎是人脑中最智能的核心，至于它具体是怎么工作的，诸如神经元之间的链接之类，我们现阶段不需要掌握。 7 | 8 | 编译器就像是人脑里的语言模块。一老外跟自己说话，他的话就是一串代码，人脑分析完语法语义之后，整理一下，用自己语言表述出老外说了啥。 9 | 10 | 执行器就相当于，老外跟自己说话，听懂以后，按照他说的话去做了，而不只是停留在理解的层面。 11 | 12 | 内置库就像人脑里装了不同学科的内容。来西班牙语就调用西班牙语的库理解和分析，来了天文学的知识我就调用天文学的背景知识 。 13 | 14 | 第三方库就类似书本，在线课程，给自己在处理信息的时候添加辅助工具。 15 | 16 | 学习JS就是给自己脑子里增加多一个，甚至在此基础上发展出来N个，内置库；方向就是最简单朴素的：认真上课/写作业/研习课本/从错误中总结提高。要有耐心，要有恒心，脚踏实地！ 17 | 18 | -------------------------------------------------------------------------------- /homework/lesson1/liyihang.md: -------------------------------------------------------------------------------- 1 | #1. 类比代码执行流程 2 | 类比银行开户，加入了计算机的部分概念思想，如预处理，封装，uml图 3 | 输入-》处理-》输出 4 | 5 | #2. 运行环境 6 | Javascript的运行环境有，浏览器和node 7 | VC的运行环境就是runtime， 包含各种dll等，如msvc.dll 8 | 9 | #3. V8引擎 10 | google开发的java引擎，用于客户的，服务端，可高性能的编译执行 11 | 12 | 13 | #4. 编译器/解释（执行）器 14 | 编译器，把源代码，编译、汇编和链接，输出为机器码的目标程序，运行时就直接运行机器码 15 | 解释器，把源代码产生易于执行的中间代码，在运行时进行解释 16 | 17 | 编译型语言：c c++ 18 | 解释型语言：javascript，lua，python 19 | 20 | #5. 内置库 21 | 运行环境自带，如 数学math库 22 | 23 | #6. 第三方库 24 | 如算法库，控件库，组件库。 25 | 26 | #7. 学习JS的方向 27 | 28 | js用于网页开发，移动端开发，后端开发。 29 | -------------------------------------------------------------------------------- /homework/lesson1/luoruijun.md: -------------------------------------------------------------------------------- 1 | # 第一课作业 2 | 1. 代码的执行流程：输入代码到运行环境，调用运行环境中内置库的服务，或调用第三方库的服务，送入运行环境中的v8引擎进行预处理和执行。 3 | 2. 运行环境是代码执行的环境，提供内置库的服务和v8引擎对代码的预处理和执行。JS运行环境有nodejs和浏览器运行环境。 4 | 3. v8引擎的作用是运行环境中对输入的代码进行预处理和执行，包括编译器器和执行器，编译器进行分析此法、语法、语意、优化代码，解释器进行解释代码、执行代码。 5 | 4. 内置库提供内置服务，内置库例如：网络库、日志库、JS内置对象等。不同运行环境等内置库包括等服务不同。 6 | 5. 第三方库包括jQuery、Vue、React等。 7 | 6. 学习JS的分不同的阶段，方向是掌握编程语言，掌握调用服务。第一阶段掌握编程语言，能用编程调用服务完成需求；第二阶段是了解掌握重要的服务能力，使其服务于业务。第三阶段是善于比较服务／技术之间的差异性，用最好的方式实现业务。 8 | -------------------------------------------------------------------------------- /homework/lesson1/panqi.md: -------------------------------------------------------------------------------- 1 | #第一次课程总结 2 | 3 | ##代码执行流程：编写代码，解释并执行，输出内容。 4 | 5 | ##JS运行环境：多样化，浏览器（前端）和Nodejs（后端）两种环境，拥有相同的JS内置对象，不同的内置库和第三方库。 6 | 7 | ##V8引擎：用于完成预处理和执行等核心任务。 8 | 9 | ##编译器/解释（执行）器：和英语翻译类似，编译器好比是将英语翻译成中文的工具，要先有英文输入、在工具内发生变化、最后输出中文；而解释器好比是同声传译，边听边译、随听随译，工作具有同步性特点。 10 | 11 | ##内置库：属于自带资源，能够满足常规和经常使用的需求。 12 | 13 | ##第三方库：属于外部资源，进一步扩大了可用资源范围，以满足多样化、差异化的开发需求。 14 | 15 | ##学习JS的方向： 16 | ###初级——掌握编程语言，用编程方式调用服务来完成你的需求（有如小孩子学说话、中国人学外语，学习JS语言也要多学多练多琢磨，熟练运用、扎实掌握、内化为自己的一部分，才能充分有效利用各种资源，信手拈来、满足需求。） 17 | ###提高——了解和掌握重要的服务能力，使其能服务你的业务（JS有很多资源、功能，结合自身的需求，有针对性地突出重点，单点突破、纵深延展。） 18 | ###进阶——善于比较服务/技术之间的差异性，用最好的方式实现你的业务（正所谓条条大路通罗马，业务需求的解决路径和方案也非唯一，随着学习的深入，权衡各种方法的利弊得失，综合判定选择最适合的） 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /homework/lesson1/shaozhen.md: -------------------------------------------------------------------------------- 1 | #JavaScript第一堂课学习总结 2 | 3 | ###徐老师通过讲解如何优化银行柜台工作流程，抛砖引玉类比出JavaScript代码的执行流程，深入浅出的介绍了JavaScript的总体面貌，令人印象深刻。 4 | 5 | ###随后老师使用同样方式通过介绍婴儿和小学生的生活环境来类比出浏览器环境和node.js环境对JavaScript来说，有什么不同和相同点。 6 | 7 | ###在浏览器和node.js中，它们都含有内置库可供JavaScript进行调用，虽然它们有部分是相同的，但是也有部分是不同的。因此同一段代码，未必能同时在浏览器和node.js环境中正常运行。而且他们都有很多第三方库来扩充它们的功能,第三方库有很多优秀功能，可以减少开发者大量时间和精力。它们之间还有一个共同点就是都具有V8引擎，这是JavaScript代码能够运行的关键，由对JavaScript代码进行解释执行，效率非常高，谷歌浏览器的优秀表现离不开V8引擎的加持。 8 | 9 | ###JavaScript是一个开发效率很高的语言，这归功于它是一门解释性语言，它的一条语句可以在执行的时候再翻译。但是，这也导致了它运行效率低下。 10 | 11 | ###JavaScript是一个应用广泛的语言，官方对它的更新也很频繁，可谓相关知识浩如烟海，无边无际，所以我们要找到学习的要点，深入研究。我们要利用JavaScript丰富的内置库和第三方库，用编程方式调用服务来完成相关需求，而且还要对重要的服务有足够多的了解和优劣的分析能力，善于比较服务和技术之间的差异性，使其能更好的服务业务，记住贪多嚼不烂。 12 | 13 | -------------------------------------------------------------------------------- /homework/lesson1/sunxl.md: -------------------------------------------------------------------------------- 1 | ## 小白学JavaScript 2 | 3 | 4 | ## 共建小白用的JavaScript技术文档 5 | 6 | 1. 用去银行开户的流程来类比代码的执行流程 7 | 2. 运行环境有nodejs和chrome浏览器，V8引擎暂时不用理他。 8 | 3. 编译器/解释器 chrome浏览器就可以编译，JavaScript是基础语言，应用很广，基于它设计出的语言都有100多种，了解它对学习其他语言很有帮助。 9 | 4. 内置库需要初学者花时间精力学习的，第三方库也很重要，初步了解 10 | 5. 学习js，在不同的阶段，都有不同的提高方式，所以说这是一个可以不断提升的技能，徐老师总结的三个阶段的不同突破方法，也可以用到其他语言学习上。 11 | -------------------------------------------------------------------------------- /homework/lesson1/wangmeiling.md: -------------------------------------------------------------------------------- 1 | 【第一次作业】写一篇总结 2 | 3 | 运用下面这些关键词，把你知道的写出来。 4 | 5 | 1. 类比代码执行流程 6 | 银行开户流程，由客户和桂圆的简单分工，到银行方面有了内置的服务，比如打印身份证；到有了第三方，比如派出所。 7 | 通过银行开户流程的逐步优化到全面介绍代码的整个框架。我体会到编程思维是不是可以应用于日常工作的优化？ 8 | 9 | 2. 运行环境 10 | 婴儿面临的世界和10岁小孩的世界是不同的，他们面对的世界就是环境； 11 | 而当我做在办公室里工作时，办公室的空间、办公室里的同事、空气、光线就是我工作的运行环境。 12 | JS的运行环境是一个可以执行代码的黑盒。 13 | 3. V8引擎 14 | V8引擎是属于运行环境中的一个小小盒子，它是执行代码的。 15 | 4. 编译器/解释（执行）器 16 | 对输入的代码进行解释、翻译，就像豆浆机一样把豆子打碎最后输出豆浆。 17 | 5. 内置库 18 | 可以直接调用的工具，就像修车行的工具箱里的工具。 19 | 6. 第三方库 20 | 公司、个人、开源、收费等提供的库（工具） 21 | 7. 学习JS的方向 22 | 我想学会搭建一个网页APP，用来记录每本书的阅读时间。 23 | 24 | -------------------------------------------------------------------------------- /homework/lesson1/wangshasha.md: -------------------------------------------------------------------------------- 1 | # lesson1 homework 王沙沙 2 | 3 | 标签（空格分隔）： javascript 4 | 5 | 2017.8.13 6 | 7 | ##对编程的感性认知 8 | 就像去办银行卡，基本服务和增值服务分窗口，每个窗口执行特定功能，但都在银行里面完成的，偶尔特殊功能银行也需要和外面的组织合作；代码也是一样，在一个平台上可以进行多种服务的调度，你要哪种用代码调过来就好了（就像在银行/营业厅，你需要什么跑到对应窗口就好），有时候有些功能没有，就需要用到外面的功能集合（库）——小白的理解，不造是否有误 9 | 10 | ##语言类型 11 | javascript是解释型语言，就是你把代码拼好了塞进去让它耍，它自己在哪折腾就会有点慢；C,C++是编译型语言，大概是它做点事要向你反馈一下，进度稍微慢一点，其他好处我还不知道 12 | 13 | ##编程环境 14 | js可以用在很多地方，根据做出来的效果能不能直接呈现在大家电脑上，大概分两类：看得到的和一般人看不到的能呈现的是前端，不能的是后端。就像每个人在自己不同阶段所处的环境不同，js编程也需要不同的运行环境；前端的开发环境是chrome，后端是nodejs 15 | 16 | ##学js学的是什么 17 | js编程是干什么：会用命令，调用内置库和第三方库 18 | 所以学习内容：小白起步时，会用命令； 19 | 进阶：熟悉这些库的用法； 20 | 提升：用最好的方式来实现需求 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /homework/lesson1/wangwei.md: -------------------------------------------------------------------------------- 1 | 1. 类比代码执行流程 2 | > 比如去银行开一个户,先要填写申请单,对应的就是编写代码,把申请单交给银行工作人员审核,就是编译器和解释器 编译执行的过程, 然后是银行给出一个结果,或者有错误,重新修改代码,或者是通过,给出一个结果 3 | 2. 运行环境 4 | >一个执行代码的黑盒,里面有 V8引擎 和 内置库 5 | >JS 运行环境有两大类: 6 | >>1. 浏览器 运行环境 7 | >>2. Nodejs 运行环境 8 | 9 | >两种运行环境包含各自的 V8引擎 和 内置服务 10 | 11 | 12 | 3. V8引擎 13 | > 代码在V8引擎里面编译和执行代码,然后给出结果. 14 | 15 | 16 | 4. 编译器/解释（执行）器 17 | >对高级语言来说,需要一个编译器,将高级语言编写的代码 编译成 中间文件,然后 这个中间文件又再解释(执行)器里 给 电脑,最终给出结果. 18 | 19 | 20 | 5. 内置库 21 | >运行环境自带的内置对象,可以直接调用 22 | 6. 第三方库 23 | > 第三方开发的对象,需要引入,才能调用 24 | 25 | 7. 学习JS的方向 26 | > 从小白到入门,掌握编程语言 27 | >入门到提高, 了解掌握重要服务,解决实际需求 28 | >提高到进阶 ,能够比较各个技术,服务之间的差异,用最好的方式来实现 29 | -------------------------------------------------------------------------------- /homework/lesson1/wangyuliang.md: -------------------------------------------------------------------------------- 1 | ##【第一次作业】写一篇总结 2 | 3 | ###1. 类比代码执行流程 4 | 通过银行开户，输入开户人信息类比代码的输入，通过银行的处理类比编译器/解释器，然后输出结果。而JavaScript通过类比它是非常高效的，输入代码，通过内置库和编译器、执行器的处理就能实现效果。把麻烦都丢在内置库里的感觉。 5 | ###2. 运行环境 6 | 运行环境，我想的是上班和下班回家，面对的情况不一样，你应对方式也不一样，不能拿工作的状态和家人相处。运行环境不一样，使用的第三方库也不一样，错用内置库和第三方库会使代码显示不了。见人说人话，见鬼说鬼话。 7 | ###3. V8引擎 8 | 踩下油门（输入代码），引擎开始给油做功加大（V8引擎执行加快速度这个代码的），输出速度加快，编程就是踩下油门等待引擎加快速度 9 | ###4. 编译器/解释（执行）器 10 | 编译器/解释器是V8引擎的一部分，它们负责分析你输入的代码表达的什么意思，到底给油还是减少给油。 11 | ###5. 内置库 12 | 内置库就是系统自带软件，如去住宾馆，提供的房价包含服务基本保证你的需求，但你有些时候需要其他服务，这时候就会去第三方库寻找。 13 | ###6. 第三方库 14 | ###7. 学习JS的方向 15 | >掌握编程语言，用编程方式调用服务来完成你的需求；了解和掌握重要的服务能力，使其能服务你的业务；善于比较服务/技术之间的差异，用最好的方式去实现你的业务。 16 | 17 | 放下傲慢虚心学习才是成为高手的方法， 带有目的性学习，学习这个编程语言是完成什么需求，把这个语言与实际需求相结合，掌握它们之间的差别，用最好的方式去帮自己达成目标。 18 | -------------------------------------------------------------------------------- /homework/lesson1/wenliuxin.md: -------------------------------------------------------------------------------- 1 | ### 1. 类比代码执行流程： 2 | a) 银行开户程序有用户，内置服务（打印、照相等），业务办理（核对申请表基本格式、审查申请内容是否符合标准） 3 | b) 编程中，用户就是代码，内置服务就是编译器，业务就是执行器。 4 | c) 代码执行流程类比银行开户：写代码（用户），代码在编译器编译（使用内置服务），提交到执行器（业务办理），执行。 5 | ### 2. 运行环境 6 | 好似小孩子生活环境的不一样，js有html环境和node.js环境。两种不同环境生活的孩子有不同的生活习惯，所以，不同的运行环境需要不同的代码 7 | ### 3. V8引擎 8 | 黑盒子，输入一样东西，出来相应结果。一种类似烤箱一样的东西，你把面包弄好形状放进去，出来就是想要的烘培好了的面包。 9 | ### 4. 编译器/解释（执行）器 10 | 编译器是把人类写的代码翻译成机器能够明白的代码，然后把这些代码发送到解释（执行）器中，电脑执行代码内容。 11 | ### 5. 内置库 12 | 运行环境自带的功能，也就是好像银行里面请求打印、照相之类的服务 13 | ### 6. 第三方库 14 | 除了js本身带有的功能，其他公司开发可以兼容到js的软件or功能 15 | ### 7. 学习JS的方向 16 | 掌握编程语言；掌握服务器；比较不同服务器，哪种能够最简洁完成任务就选哪种 17 | -------------------------------------------------------------------------------- /homework/lesson1/wenyunxin.md: -------------------------------------------------------------------------------- 1 | ## 1、类比代码执行流程 2 | 代码的执行流程就好比人根据一项说明说去完成某件事情，比如制作番茄炒鸡蛋，根据食谱的说明，调用准备的材料，按照某种顺序将材料进行加工，最后完成制作。 3 | ## 2、运行环境 4 | 未查找资料我的理解：程序的运行所依托的系统构造。比如软件运行在windows系统和运行在lunix系统下，其运行环境就不一样。 5 | ## 3、V8引擎 6 | 运行JavaScipt初始功能代码的系统功能。 7 | ## 4、编译器/解释（执行）器 8 | 这应该是指能用代码运行的shell,如cmd,IDE,编程语言安装的shell等等。 9 | ## 5、内置库 10 | 编程语言自带的可直接调用的使用某些功能的函数。如python里的max等函数。 11 | ## 6、第三方库 12 | 需要额外安装的，有第三方编写的能实现某些功能的pakage。 13 | ## 7、学习JS的方向 14 | 网页设计的HTML、CSS、JavaScript。其中JS是使网页实现动态交互和数据传输的语言。微信程序开发。 15 | -------------------------------------------------------------------------------- /homework/lesson1/wukuipin.md: -------------------------------------------------------------------------------- 1 | 1. 类比代码执行流程 2 | > 当你去银行开户，将开户申请表提交到银行窗口，银行接收申请，在后台处理，通过审查和执行申请，然后返回结果。如果信息审核通过，银行就通过申请，这样就开好银行账户了。 3 | 4 | 2. 运行环境 5 | > 运行环境分为（前端）浏览器的运行环境和（后端）Nodejs的运行环境。 6 | 7 | > 他们的内置库都包含有JS内置对象，都有第三方库。运行环境就相当于一个人的生活环境，他生存下去的物质需求以及生活和工作上的各种社会关系构成的生活环境。这相当于JS运行的库，JS代码要执行就的有运行环境，否则代码就失去意义。 8 | 9 | 3. V8引擎 10 | > 就是对代码进行预处理和执行的黑盒子。 11 | 12 | 4. 编译器/解释（执行）器 13 | > * 编译器：需要一个专门的编译过程，通过编译器翻译成机器语言。特点：运行效率高。缺点：开发效率低。 14 | 15 | > * 解释性：一条语句执行的时候才翻译。特点：开发效率高。缺点：运行效率低。 16 | 17 | 5. 内置库 18 | >运行核心，就是在运行环境里面有哪些东西我们可以去使用。如：网络库、日志库、JS内置对象等。 19 | 20 | 6. 第三方库 21 | > 围绕浏览器运行环境和Nodejs运行环境有很多第三方库，以满足javascript代码的调用。 22 | 23 | 7. 学习JS的方向 24 | > ***掌握编程语言***，用编程方式调用服务来完成你的需求。 25 | 第一步：学会如何调用内置库和第三方库； 26 | 27 | > ***了解和掌握重要的服务能力***，使其能服务你的业务。 28 | 第二步，深入了解内置库和第三方库； 29 | 30 | > 善于比较服务/技术之间的差异性，***用最好的方式实现你的业务***。 31 | -------------------------------------------------------------------------------- /homework/lesson1/xianengqi.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | +要熟练掌握`编程语言` 4 | ## 5 | +要熟练运用`内置库` 6 | ### 7 | +运用编程语言灵活运用`第三方库` 8 | -------------------------------------------------------------------------------- /homework/lesson1/xugaoyang.md: -------------------------------------------------------------------------------- 1 | 【第一次作业】写一篇总结 2 | 3 | 运用下面这些关键词，把你知道的写出来。 4 | 5 | 1. 类比代码执行流程 6 | 2. 运行环境 7 | 3. V8引擎 8 | 4. 编译器/解释（执行）器 9 | 5. 内置库 10 | 6. 第三方库 11 | 7. 学习JS的方向 12 | 13 | 提交方式： 14 | 1. 请向getting-started-with-javascript项目发起pull request。 15 | 16 | https://github.com/xugy0926/getting-started-with-javascript 17 | 18 | 2. 文档格式，markdown。 19 | 3. 提交homework/lesson1目录下。 20 | -------------------------------------------------------------------------------- /homework/lesson1/xuluchun.md: -------------------------------------------------------------------------------- 1 |

许路春第一课总结

2 |

牢记学习的方向

3 | 8 | 9 |

javascript组成

10 | 15 | -------------------------------------------------------------------------------- /homework/lesson1/yangchunguang.md: -------------------------------------------------------------------------------- 1 | ##第一次作业 2 | 3 | 第一次提交作业，还不懂如何使用GitHub，就当跟它混个脸熟吧。 4 | 上编程课给我最大的感受就是，提出一个问题，会引出一堆问题来，这些问题好像没有穷尽，以至于差点放弃。我争取跟上大部队的进度。 5 | 感谢高阳老师耐心授课，感觉学不会都对不住老师。 6 | 7 | 1. 类比代码执行流程 8 | 我理解的执行流程是：定义-运行-输出。 9 | 当老师用银行开户去类比时，我还想，这个比喻倒挺贴近生活。当进行到优化开户者的使用体验时，我感到编程的思维太牛逼了！ 10 | 如果能把编程思维用到生活中，那解决起问题来不是要逆天！但是后边一没听懂就泄劲了... 11 | 12 | 2. 运行环境 13 | 我理解的运行环境，就像是鱼生活在海水里，自带了氧气、水、矿物质等元素。代码就是鱼，环境就是海水和海水所包含的元素。 14 | JS的运行环境有浏览器和nodeJS两种。 15 | 16 | 3. V8引擎 17 | 就是代码的处理器。 18 | 19 | 4. 编译器/解释（执行）器 20 | 就是对代码进行翻译和执行的工具。 21 | 22 | 5. 内置库 23 | 供代码调用的功能模块 24 | 25 | 6. 第三方库 26 | 第三方供调用的模块 27 | 28 | 7. 学习JS的方向 29 | 页面、小程序 30 | -------------------------------------------------------------------------------- /homework/lesson1/yanglovewo.md: -------------------------------------------------------------------------------- 1 | 【第一次作业】写一篇总结 2 | 3 | 1. 类比代码执行流程 4 | 2. 运行环境：终端，浏览器 5 | 3. V8引擎 6 | 4. 编译器/解释（执行）器 7 | 5. 内置库 8 | 6. 第三方库 9 | 7. 学习JS的方向:想要完成专门课程，实现从0到0.5. -------------------------------------------------------------------------------- /homework/lesson1/yangtieming.md: -------------------------------------------------------------------------------- 1 | # JavaScrip Lesson 1 homework. 2 | 3 | 对于编译型语言，原始的代码需要经过**编译器**的加工处理，把它先变成**解释器/执行器**可读懂并可执行的代码，然后再交由**解释器/执行器**执行。 4 | 这个过程就像我们过年时买回家的半成品年夜饭，所有的食材和佐料是由商家帮我们加工好了，我们自己只要在锅里炒一下就可以了。 5 | 商家就是这个**编译器**。我们自己的炒菜行为就是**解释器/执行器**的行为 6 | 7 | 对于解释型语言，则是将原始的代码直接输入给**编译器/执行器**，由**编译器/执行器**逐条的解释和执行。 8 | 这个过程就像一个看菜谱烧菜的人，通常会读懂一步，按照说明操作一步。 9 | 10 | 假设我们准备的生的食材就是我们自己编的代码。 11 | 我们烧菜所需要的锅，铲，煤气灶，油，盐，酱，醋等等烧菜必备的工具和调料就类似于原始的代码**运行的环境**。 12 | 假设左边的灶头上只能用来烧菜，而右边的灶头只能用来烧饭。 13 | 那么左边烧菜的灶头就像**浏览器运行环境**，而右边的灶头就像**Node.js的运行环境**。 14 | 而专门用作烧饭的各种专业锅具就是浏览器的各种内置服务，而专门烧菜用的各种锅具就是Node.js的各种内置服务（**内置库**） 15 | 有时家里来了要宴请客人，锅碗瓢盆不够，就向邻居去借，而邻居提供的锅碗瓢盆就像第三方提供的服务（**第三方库**） 16 | 家里古董似的老旧灶头火候太小，烧菜烧饭要一个小时，换了新的老板牌燃气灶烧菜烧饭10分钟就搞定，老板牌燃气灶就像**V8引擎**，可以提供大火，快速加热。 17 | 18 | 然后人类食欲无边，总是不断推出新的菜品，要提高自己的厨艺，就只能不断的学习，这就是**学习JS的方向，无边无际……** -------------------------------------------------------------------------------- /homework/lesson1/yimiao.md: -------------------------------------------------------------------------------- 1 | ### 第一次作业 2 | ## yimiao 3 | 4 | 学会了java的基本组成： 5 | 1. 类比代码执行流程 6 | 按照老师的类比，就好像是去银行办卡，先要填写表单（输入代码），然后提交审核（编译器编译），办理业务（执行器执行代码），最终拿卡（反馈结果）。此外，银行还提供了内部服务（内置库），还有第三方公司提供的便捷服务（第三方库）。 7 | 8 | 2. 运行环境 9 | JS的运行环境，分为两个，一个是浏览器的运行环境，一个是NOTE的执行环境。所谓执行环境，可以看做为了执行代码可以调动的资源总和，包括JS内置配置，内置库，外部库等。 10 | 11 | 3. V8引擎 12 | V8引擎为JS语言中负责预处理和执行代码的部分。 13 | 14 | 4. 编译器/解释（执行）器 15 | V8引擎的功能是对代码进行预处理和执行，相当于编译器+执行器. 16 | 17 | 5. 内置库 18 | 每种运行环境中，直接可供应用的内置库，好比直接可以用的轮子和模块。内置库需要初学者花时间精力学习的. 19 | 20 | 6. 第三方库 21 | 每种运行环境中，外部的可供应用的外部资源库。 22 | 23 | 7. 学习JS的方向 24 | 学习js中什么最重要？掌握编程语言最重要，现阶段。 25 | -------------------------------------------------------------------------------- /homework/lesson1/yongfei.md: -------------------------------------------------------------------------------- 1 | 2 | **类比代码执行流程** 3 | * 代码 输入 执行 输出 4 | * 类比：银行开户 申请 检查 反馈 5 | 6 | **运行环境** 7 | * Javascript的环境，一种是chrome浏览器，一种是Node.js 8 | * 类比：婴儿的生存环境 家、游乐场、玩具、食物 9 | 小学生的生存环境 家、学校、游戏、体育馆 10 | 11 | **V8引擎** 12 | 黑盒、用于执行代码 13 | 14 | **编译器/解释（执行）器** 15 | 1. 分析词法 16 | 2. 分析语法 17 | 3. 分析语义 18 | 4. 优化代码 19 | 5. 解释代码 20 | 6. 执行代码 21 | 22 | 编译器／解释器是V8引擎的组成部分 23 | * 编译型：需要一个专门的编译过程，通过编译器翻译成机器语言；特点：运行效率高；缺点：开发效率低。 24 | * 解释型：一条语句执行的时候翻译，特点：开发效率高；缺点：运行效率低。 25 | 26 | 27 | **内置库** 28 | 包括JS内置对象、网络库、日志库等 29 | 是运行环境提供的服务。 30 | 31 | **第三方库** 32 | 由成千上万的公司或个人提供的开源或收费的库。 33 | 第三方库是有别于内置库的一个开放的外部资源，更好的帮助我们达成目标，它不断更新，不断为我们提供更好的服务。 34 | 35 | **学习JS的方向** 36 | 通过练习一个个小项目，达到能独立开发项目的程度。 37 | -------------------------------------------------------------------------------- /homework/lesson1/youshilei.md: -------------------------------------------------------------------------------- 1 | #【第一次作业】写一篇总结 2 | 3 | 4 | 5 | ### 1. 类比代码执行流程 6 | 7 | 用银行办卡业务流程做类比，形象的解释了JavaScript的运行方式。 8 | 9 | ### 2. 运行环境 10 | 11 | 主要是软件环境，有浏览器环境和NODEJS的环境。 12 | 13 | ### 3. V8引擎 14 | 15 | V8 是 Google 发布的开源 JavaScript 引擎，采用 C++ 编写，在 Google 的 Chrome 浏览器中被使用。 16 | 17 | ### 4. 编译器/解释（执行）器 18 | 19 | - 编译器 20 | 21 | 就是将“一种语言（通常为高级语言）”翻译为“另一种语言（通常为低级语言）”的程序。 22 | 23 | - 解释（执行）器 24 | 25 | 又译为直译器，是一种电脑程序，能够把高级编程语言一行一行直接转译运行。 26 | 27 | ### 5. 内置库 28 | 29 | 软件自带的，已经封装过的，可直接调用，提高写代码的效率。 30 | 31 | ### 6. 第三方库 32 | 33 | 可以满足更多个性化需求，弥补了标准库的不足，大大方便了JavaScript的编程。 34 | 35 | ### 7. 学习JS的方向 36 | 37 | 跟着老师，体会编程的魅力，掌握基本的编程技能，不断学习，服务生活。 -------------------------------------------------------------------------------- /homework/lesson1/yujianke.md: -------------------------------------------------------------------------------- 1 | 1. 类比代码执行流程 2 | --编写代码--编译器分析代码--输出结果。 3 | 4 | 2. 运行环境 5 | --有浏览器和Nodejs。 6 | 7 | 3. V8引擎 8 | --对代码的预处理，检查代码是否有错误。 9 | 10 | 4. 编译器/解释（执行）器 11 | --把高级语言转换成低级语言。 12 | 13 | 14 | 5. 内置库 15 | --浏览器运行环境：JS内置库；WebAPI；WebGL; HTTP; WebTRC; canvas。。。。 16 | --Node运行环境： JS内置对象； NODE API. 17 | 18 | 6. 第三方库 19 | --浏览器：jQuery; Vue; AngularJS; React...... 20 | --Node ：EXPRESS; Koa; Webpack; Promise..... 21 | 22 | 7. 学习JS的方向 23 | --学习怎样调用内置库和怎样使用第三方库。 24 | -------------------------------------------------------------------------------- /homework/lesson1/zhanggaoyang.md: -------------------------------------------------------------------------------- 1 | 看了大家的总结，有几篇总结写的非常到位，让人一目了然，但是看到文章末尾发现也是小白，自愧不如。看到大家都是对老师整个讲课过程进行的总结，我决定对讲课思路进行总结。 2 | 3 | 可以注意到全程都是建立在银行开户流程改进这个类比上的。由一个简单的流程一步一步变得复杂，再通过类比到js，再拆分出每个概念。 4 | 5 | 老师通过对银行开户流程的一步步改进后的类比让我们一步一步的跟着老师的思路对整个js语言的运行环境的概念有了清楚的了解。比如，当我们不清楚什么是内置库的时候，只要想到银行提供的那些服务就会通过联想达到理解。 6 | 7 | 在进行解释器和编译器以及浏览器环境和node运行环境的对比，和最后讲学习java时需要考虑到其中服务或技术之间的差异性相呼应。 8 | 9 | 所以 10 | 11 | >对比差异性，掌握你的编程语言，了解那些内置库和第三方库是学习过程成中最重要的事。 12 | -------------------------------------------------------------------------------- /homework/lesson1/zhangqian.md: -------------------------------------------------------------------------------- 1 | ### 第一课作业 2 | ####1、类比代码执行流程 3 | 好比我们去银行办理汇款业务，先要填写申请单，到柜台交给工作人员核对数据，他们在录入系统进行再次比对，然后产出结果，代码执行的流程就是我们把相关语言输入到电脑的软件，软件对输入的语言解析，从而产出你想表述的内容。 4 | ####2、运行环境 5 | 编程的运行环境好比人类的生存环境，需要水、空气、食物、衣物及思想，而程序的环境就是具备内置库及处理引擎。 6 | ####3、V8引擎 7 | 老师说是黑匣子，对代码进行预处理，对代码进行解析。我认为应该好比华罗庚的泡茶方法论，是一种基于底层原理的处理环境。 8 | ####4、编译器／解释（执行）器 9 | 对问题的拆解能力。 10 | ####5、内置库 11 | 比如我们需要做一道菜（蚂蚁上树），锅、铲子、灶台就是内置库。粉条和肉末就是代码，人为的翻炒动作就是运行环境里的编译器／解释器，最终成品就是一道美味佳肴。 12 | ####6、第三方库 13 | 第三方库就是帮我们更好的完善结果，我们现在正在用的github就是开源的库。还是做菜的例子，想要菜好吃，佐料就属于第三方库。 14 | ####7、学习JS的方向 15 | 高阳老师的教学方法很贴近学生，尤其是和同样教授编程课的老师们比，更多的是仔细与用心，建群及助教帮助学生解答疑难问题都是很好的促进学生学习的方式。不管学习任何一门知识，更多的是“师父领进门、修行靠个人"。我最初阶段的学习方向就是紧跟老师步伐，完成每一课作业。明天比今天多知道一些javascript的知识点。 16 | -------------------------------------------------------------------------------- /homework/lesson1/zhaoyinan.md: -------------------------------------------------------------------------------- 1 | 【第一次总结——初学JS对一些基础概念的总结】 2 | author：赵一楠* 3 | version：V1* 4 | create_time：2017-08-11* 5 | 1. 类比代码执行流程 6 | 按照老师的类比，就好像是去银行办卡，先要填写表单（输入代码），然后提交审核（编译器编译），办理业务（执行器执行代码），最终拿卡（反馈结果）。此外，银行还提供了内部服务（内置库），还有第三方公司提供的便捷服务（第三方库）。 7 | 8 | 2. 运行环境 9 | JS的运行环境分为”浏览器”和”node”，每种运行环境有着不同的内置服务（内置库）和第三方库。这就好比是每个人周边的环境都不一样，有着不同的（有时也有重叠）内置服务和第三方服务。 10 | 11 | 3. V8引擎 12 | V8引擎为JS语言中负责预处理和执行代码的部分。 13 | 14 | 4. 编译器/解释（执行）器 15 | 应是V8引擎，对代码进行编译和执行。 16 | 17 | 5. 内置库 18 | 每种运行环境中，直接可供应用的内置库。 19 | 20 | 6. 第三方库 21 | 每种运行环境中，外部的可供应用的外部资源库 22 | 23 | 7. 学习JS的方向 24 | 焦点集中在我们写的代码上，我当前的目标就是熟练运用代码，熟练掌握编程语言。 25 | -------------------------------------------------------------------------------- /homework/lesson1/zhouhong.md: -------------------------------------------------------------------------------- 1 | 1. 类比代码执行流程 2 | 写代码---编译器---解释器---输出 3 | 2. 运行环境 4 | 相当于银行的开户环境，运行环境就是我们干事请时需要的环境，浏览器运行环境和Nodejs运行环境不同。 5 | 3. V8引擎 6 | 包含编译和执行 7 | 4. 编译器/解释（执行）器 8 | 有的语言是编译型，有的是解释型 9 | 5. 内置库 10 | 属于运行环境的一部分 11 | 6. 第三方库 12 | 第三方提供服务的 13 | 7. 学习JS的方向 14 | 先学会写代码，知道自己要想做成一件什么事情。 15 | -------------------------------------------------------------------------------- /homework/lesson1/zhouqizhou.md: -------------------------------------------------------------------------------- 1 | # 总结 2 | #### 1.类比代码执行的流程 3 | 将代码通过编译器逐条执行，传递系统所需要的参数，完成整个服务 4 | ![](https://ws3.sinaimg.cn/large/006tNc79gy1ficlkyz1qzj30f70cy754.jpg) 5 | 6 | ![](https://ws3.sinaimg.cn/large/006tNc79ly1ficlmh4s69j30lo09m3zw.jpg) 7 | 8 | ![](https://ws1.sinaimg.cn/large/006tNc79ly1ficlo8l6u8j30m50ffgnk.jpg) 9 | 10 | ![](https://ws1.sinaimg.cn/large/006tNc79ly1ficlq4mfjhj30ma0f3myr.jpg) 11 | 12 | #### 2.运行环境 13 | js 主要运行于浏览器上，不过现在出现node js 14 | #### v8引擎 15 | 是google 开发的一个代码解析器 16 | #### 编译器／解释（执行）器 17 | 把代码编译成二进制 ，计算机只认识二进制。 18 | #### 第三方库 19 | 是通过多次的总结归纳，那些经常使用的或者一些很复杂的集合 通过库的方式来调用 20 | #### 学习js 21 | 的方向 能完成设计产品上线营销 22 | 23 | -------------------------------------------------------------------------------- /homework/lesson1/zhouziqi.md: -------------------------------------------------------------------------------- 1 | # 第一次课总结 2 | 3 | ## 类比代码执行流程 4 | - 以银行开户流程作类比 5 | - 一步步改进银行开户流程，最终形成与js运行环境类似的流程 6 | 7 | ## JS运行环境框架 8 | ### JS运行环境 9 | #### 浏览器运行环境 10 | - V8引擎——用来执行代码的黑盒子 11 | - 内置服务——写代码时能用的内置服务 12 | #### Nodejs运行环境 13 | - V8引擎 14 | - 内置服务 15 | ### 第三方库——从运行环境外调用的服务，大佬们智慧的结晶。熟悉第三方库很有用【虽然现在我还并不清楚有什么用】。 16 | 17 | ## 两种语言类型 18 | ### 编译型语言 19 | - 运行效率高，开发效率低 20 | - 执行流程：代码--编译器（分析词法、语法、语义病优化代码）---编译好的代码---执行器（解释代码、执行代码）---输出结果。 21 | ### 解释型语言 22 | - 运行效率低，开发效率高 23 | - 执行流程：代码--编译器/解释器--输出结果。 24 | 25 | ## 学习JS的方向 26 | 一步步跟着老师走，不懂就搜，搜不到或者看不懂再问。不怕失败不怕麻烦。 27 | -------------------------------------------------------------------------------- /homework/lesson1/zhuningning.md: -------------------------------------------------------------------------------- 1 | 2 | ### 1. 类比代码执行流程 3 | 通过`银行开户流程`来类比代码执行流程：更好的模块化——抽离出常用的功能，单独作为内置服务；将预处理和执行模块分离开来； 4 | 5 | >开户环境、内置服务、业务核心。 6 | 7 | ### 2.运行环境 8 | JavaScript有两种运行环境 9 | >浏览器运行环境： 基于浏览器的 javascript 前端 JS 10 | > Node.js运行环境：基于服务端的 javascript 后端 Node.js 11 | 12 | *** 13 | 14 | ### 3.V8引擎 15 | * V8是Google开发的开源JavaScript引擎。 16 | * JavaScript 引擎的基本工作是把开发人员写的 JavaScript 代码转换成高效、优化的代码。 17 | 18 | *** 19 | 20 | ### 4.编译器/解释器 21 | 22 | * 编译器。主要工作是将源代码编译成抽象语法树，然后在某些引擎中还包含将抽象语法树转换成字节码。 23 | * 解释器。在某些引擎中，解释器主要是接受字节码，解释执行这个字节码，然后也依赖来及回收机制等。 24 | 25 | *** 26 | 27 | ### 5.内置库 28 | 内置库 通常都是环境自带的内置服务，提供开发所需的基本功能，包括基本的数据结构，模块，函数，等。 29 | 30 | *** 31 | 32 | ### 6.第三方库 33 | 拿来主义，第三方库一般都是指同种语言开发的拓展功能，以满足多样化的需求。 34 | 35 | *** 36 | 37 | ### 7.学习JS的方向 38 | 用计算机的思想来武装自己，丰富自己！ 39 | *** 40 | -------------------------------------------------------------------------------- /homework/lesson1/zhuxiaoping.md: -------------------------------------------------------------------------------- 1 | ## **类比代码执行流程** 2 | 3 | 代码，像是一个【病人】，本身带着需要解决的问题，有着相对明确的目标，最后要赢得【健康】而在特定的运行环境【医院】下奔波。 4 | 5 | ## **运行环境** 6 | 代码作为一个【病人】必需要去【医院】这个特殊的环境，才能向着解决本质问题的方向前进，但凡进了学校、菜市场根本无法辨识病症，更没办法解决问题。 7 | 8 | ## **V8引擎** 9 | 【医院】本身的等级三甲，二乙；本质上干的是一回事，就是档次有差，服务体验有差。 10 | 11 | ## **编译器**、解释（执行）器 12 | 编译器就是【医院】里的各种仪器设备，它们把【病人】通俗的人类民间语言翻译成医疗专用数据，化验单上的上下箭头，B超单上的图片数据等，再由解释（执行）器【医生】解读执行，最终对症下药，给出结果。 13 | 14 | ## **内置库** 15 | 内置库就是【医院】里各个科室，各自有各自的特长，处理专门的问题，需要哪科去哪科；吃饱了撑着或者土豪全都跑一遍，对于看病也没什么大问题，就是浪费。 16 | 17 | ## **第三方库** 18 | 第三方库就是【医院】外部相关单位，比如【血站】不是非要用上的，但是多少是相关的。 19 | 20 | ## **学习JS的方向** 21 | 1、牢固掌握基本知识：编程的语言的基础。 22 | 2、借助内置库和第三方库完善自我代码打包，完成任务。 23 | 3、对任务目标的不断优化，就如徐老师的银行开户业务，先要优化流程，优化代码，做到精益求精。 -------------------------------------------------------------------------------- /homework/lesson1/zhuyongjin.md: -------------------------------------------------------------------------------- 1 |  2 | 先说说执行流程，老师运用银行开卡的流程，类比介绍了代码的执行流程，运行环境就像是银行。而V8引擎就像是里面的各种库。有浏览器的库，也有Node库。不管是浏览器还是Node库。都是有内置库。然后就外面而言，除了JS库自身的库，还有很多公司在做第三方库。 3 | 4 | 我们，从内置库或者第三方库调用数据，然后生成一个自己的代码集，然后去执行（V8引擎），生成结果 5 | 学习JS的方向就是从内置库和第三方调用库编辑代码，用自己的。 6 | 7 | 当然，还有编译器和解释器，JS是属于解释器 -------------------------------------------------------------------------------- /homework/lesson2/JayChen.md: -------------------------------------------------------------------------------- 1 | # HW2 2 | 3 | ## 1. 编程中为什么会有丰富化的数据格式 4 | 5 | 当一个变量被申明时，这个变量就从无到有地诞生了，我个人粗浅的觉得如果能够类比成“怀孕并起名”会更为合适。 6 | 7 | 我们申明一个变量是为了今后更好地掌控并操作他们，因此在变量刚出现在这个世界上的时候，就需要分门别类地给他们安排一个专门的地方安置，并为今后更好地掌控他们提前做好安排。就好比如果有一个医院负责接生这世上所有的 object，那医院也需要先分门别类一下，人是人他妈生的，动物是动物他妈生的，数字是数字他妈生的，字符是字符他妈生的。。。。。。这样才不会混乱，才能各找各妈、各回各家，方便以后到时间上户口、做普查、划定规则规定某些数字只能在一个小区内打转转。。。。。。当然，听说某些生物还可以强制变种，相当于移民，这是后话。这个医院在接生的时候就把不同种类的宝宝绑上一个随身携带的标签（不会过分细致但是足以对不同的宝宝做区分）以快速归类，并放进合适位置的保温箱，这样就既方便又不会搞错了。 8 | 9 | 这就是我理解的为什么会有丰富化的数据格式的原因，纯属小白胡乱搜索以后的猜想。 10 | 11 | ## 2. github个人页面 12 | 13 | https://flyrain78.github.io/page_test/ 14 | 15 | -------------------------------------------------------------------------------- /homework/lesson2/Jaykey_Guo.md: -------------------------------------------------------------------------------- 1 | ### 基础-第二课 2 | 3 | ##### 命名 4 | 5 | 一个名字背后包含很多的属性，有不同的描述，对应的数据表的标题和内容。 6 | 7 | JS中采用的是山顶式的命名方法： 8 | 9 | ```Javascript 10 | var userName = "liming"; 11 | var isAdmin = true; 12 | console.log(userName); 13 | 14 | /*一个很长的名字*/ 15 | var myJavaScriptUserName = { 16 | student: name, 17 | title: "xxxx", 18 | }; 19 | ``` 20 | 21 | 需要注意的是，每一个JavaScript命令结束的时候使用**"*;*"** 22 | 23 | 在每一个属性之后使用的是**","**来分割不同的属性。 24 | 25 | ###### 程序：处理数据的工具，最终得到的对应的结果。 26 | 27 | 个人JS学习记录网页：https://jaygjianguo.github.io/js-study-record/ 28 | 29 | ------ 30 | 31 | 小结： 32 | 33 | JS的命令格式有自己的特点，需要注意的是结束用分号，一个变量之中的不同属性用逗号，在Node的环境下运行的结果就是对应输出数据。 34 | 35 | 在变量的添加中，可以直接在原有变量的基础上进行添加，但是必须赋予对应的值，如果只是添加了变量的类型，没有赋予对应值，会出现报错。 36 | 37 | JS中的循环与Java类似，都是三个部分完成，*变量；循环长度，递推方式。* 38 | -------------------------------------------------------------------------------- /homework/lesson2/Liuzhengchun.md: -------------------------------------------------------------------------------- 1 | ## 第二次作业 2 | 3 | ### 编程中为什么会有丰富化的数据格式 4 | 5 | 1.这节课老师从*一切以命名开始*讲起，整节课我听的有点懵，脑海里一直带着这样的疑惑“这根编程有什么关系”，尽管我能理解老师讲的字面意思。 6 | 后面我看老师在作业区布置作业，我不知从何写起，课程总结就一直拖着没写，后面紧接着第三节课，第四节课就来了。我在把第三节课听完，又 7 | 去翻看了其他同学的总结，再回过头看老师的ppt，有那么点感觉了。 8 | 9 | 编程中的数据格式很丰富，有整数型、布尔值、字符串、数组等等，每种数据格式各有其用处，用在恰当的地方要么可以很好的表达其含义，让人一 10 | 了然，要么可以提高处理数据的结果，要么可以和其他数据进行很好的交互，用途多多。重要的是老师在课上提到的“处理数据，得到结果”，还有就 11 | 是提高“存储效率、计算效率、传递效率”。 12 | 13 | 在编程中，我们还会定义变量、函数，通过变量或者函数去操纵其他变量或函数，那么起一个好名字让人记住它，快速找到并调用它就很重要了，不 14 | 仅我们自己要能理解它，还要让其他人也能快速看懂。但是名字仅仅就是一个名字，决定它起什么作用的其实是数据，是它里面的数据与其他与其他 15 | 的变量产生联系，我们才能得到想要的结果。 16 | 17 | 2.在github上部署的静态网页：https://l328958741.github.io/my_first_webpage/ 18 | -------------------------------------------------------------------------------- /homework/lesson2/WANG XUANDING.md: -------------------------------------------------------------------------------- 1 | 2 | 首先申明一点，我极度讨厌那种为了凑字数而大段大段复制黏贴百科注释的行为。同时，我遵循如无必要，勿增实体的原则，就是几句话就能说明的东西，绝对不鬼扯。 3 | ———————————————————————————————————————————————————————————— 4 | 5 | 6 | #编程中为什么会有丰富化的数据格式？ 7 | 8 | 关键词，丰富化，数据格式，故而可从两方面入手分析 9 | 10 | ##1.为什么会丰富化 11 | [字符，字符串，布尔，整形，浮点，其他。。] 12 | 如果没有丰富化的数据格式，会是怎么样的？程序不知道我们要求输出的a是a所指代的值还是a这个字母，或者字符串。同样的，0和1到底代表什么，当为了表达T/F时，应当把他们定义为布尔，当只是为了表示数字时，则是整形/浮点。由于计算机本身并不认识数字，所以我们人为的分割出整形和浮点。即使我们输入一个为整形的3.9，那么它对于计算机也只是代表3，而浮点型的3则代表3.0。 13 | 每一种数据格式都是为了满足人对于程序的特定的需求才有的。由于人编程的目的是为了服务自身，而工具的多样性、全能性对于办事效率来说是一个重要指标。由此，可得到不同类型的数据格式表示着人对于它的需求，可能是刚需，也可能能通过其他首先去实现，但是会比较麻烦，但是毕竟人是追求效率的。 14 | 15 | ##2.为什么有数据格式 16 | 不知道有没有理解错误，如果把数据名称叫做x，那么数据格式就是x所指代的东西。可以是之前所提及的几种类型中的任意一种。如果要让x在数学运算中有意义，那么就需要给予x一个具体的形体，而不能单单只是一个未知量。5x如果x没有数据格式并没有意义，相反，如果x是整数/浮点，则机器能知道5x是个数字，如果是字符，则知道5x是字符串。数据格式的意义就是让程序能运作起来。 17 | -------------------------------------------------------------------------------- /homework/lesson2/WuGaoxing.md: -------------------------------------------------------------------------------- 1 | 编程中为什么会有丰富化的数据格式？ 2 | 编程是一个代码的世界，编程中的各种丰富数据和逻辑关系，代码来源于生活而有高于生活，生活的丰富多彩除了说写拍电影等来记录外，还可以通过代码来记录和演示，生活有多精彩数据就有多样的丰富，数据格式是与人类现实生活的参照和对比，同时又有现实世界中寻不到找不着的东西或逻辑，但是通过代码能够提现出啦，故编程世界中一定会有丰富化的数据格式，且远远不断的会丰富下去。 3 | 4 | github上的静态网页：https://5glad.github.io/one/ -------------------------------------------------------------------------------- /homework/lesson2/baoguoqiang.md: -------------------------------------------------------------------------------- 1 | # 编程中为什么会有丰富化的数据格式？ 2 | 3 | ## 首先什么是数据格式呢？ 4 | 5 | 我个人理解数据格式就是数据类型； 6 | - 在编程语言中，能够表示操作的值的类型称作数据 类型，编程语言最基本的特性就是能够支持多种数据类型（数据格式）。 7 | 8 | - JavaScript的数据类型分为两类： 9 | 10 | 1.原始类型（数字、字符串、布尔值、null、undefined）; 11 | 12 | 2.对象类型：除了数字、字符串、布尔值、null、undefined之外的就是对象了。对象是属性的集合 13 | 14 | ## 为什么会有丰富化的数据格式？ 15 | 16 | 每个属性都是由“名/值对”构成 ；（值可以是原始值，比如数字、字符串，也可以是对象） 随着值的不停的变化，属性也在变。 17 | 不同的对象我们要定义不同的值，所以就会变得丰富化。 18 | 19 | 我的静态网页url:https://baoguoqiang123.github.io/xinshen/ -------------------------------------------------------------------------------- /homework/lesson2/caozhen.md: -------------------------------------------------------------------------------- 1 | ## 编程中为什么会有丰富化的数据格式 2 | 3 | ### 程序中的各种数据，都是对客观世界的反映 4 | 5 | - 人类与其它生物相比的最大优势就是人类具有学习能力+逻辑思维能力 6 | - 为了将自己从简单机械的劳动中解放出来，使自己的生存环境更加方便舒适，人们开始探索并创造 7 | - 在客观世界中，人们制造各种设备 8 | - 而在虚拟世界中，人们创造了程序语言，描述并反映客观世界 9 | 10 | ### 客观世界是丰富多彩的，包括各种各样的内容（数据） 11 | 12 | - 数字 13 | - 字符 14 | - 单字符 15 | - 字符串 16 | - 逻辑值 17 | ### 以上内容又可以组合 18 | 19 | - 数组 20 | - 列表 21 | - 字典 22 | - 类&对象 23 | 24 | ## 我的静态网页地址 25 | 26 | https://caozhens.github.io/Javascript_Learning/ 27 | -------------------------------------------------------------------------------- /homework/lesson2/cuimiao.md: -------------------------------------------------------------------------------- 1 | #第二课笔记 2 | 老师先教给我们如何创建静态页面，又教给我们如何正确的提问题，比如遇到问题应该折腾自己，然后是搜索，再去讨论区看是否有其他同学提问过，最后最后，才能在微信群里提问，而且提问是需要技巧的，必须把自己的环境，步骤等都描述清楚，才能提问，给解答者带来方便。 3 | #正题： 4 | 其实老师真正要教给我们的是编程的思想！ 5 | 一切以命名开始 6 | 用名字来代表一组数据的集合，是一堆属性+关系+其它特征的集合，而名字就相当于是这组数据的代号。 7 | 8 | 用符号化的方式或者伪代码的方式来描述一个名字，会让我们更直观的认识它。 9 | 10 | 程序的目的是什么？处理数据，给出结果。 11 | 12 | 数据，包括小明的属性，关系等一切数据。 13 | 14 | 数据、变量 变量的名称和数据是一一对应的，通过变量名称，来使用，调用具体的数据。 15 | 16 | 声明一个变量，并对这个变量进行定义，对其赋值 17 | 多样化的数据格式，是为了更方便的定义那些变量。 18 | 19 | #实操 20 | 再次提醒编程的世界里只有英文，除了字符串可以有中文。 21 | 变量之间可以用逗号隔开，这样可以节约代码行数，提高运行效率。 22 | 对象里，定义一组数据用的是冒号而不是等号。 -------------------------------------------------------------------------------- /homework/lesson2/dangfeipeng.md: -------------------------------------------------------------------------------- 1 | ### 为什么要有丰富化的数据格式？ 2 | 3 | 现实世界是由万事万物以及各种关系和逻辑组成，人类通过数万年的进化，已经形成了一套完整的数据格式来帮助我们记录、处理、展示这个丰富多彩的世界，比如用数字表达财富，用文字或者语言表达情感，以及用图片、影像记录下难忘的精彩场面等等。 4 | 5 | 程序的目的是“处理数据，得到结果”，而这其中的数据就来源于现实世界，并且要映射到计算机当中，如果程序只有一种数据格式是否可行呢？理论上来说当然可行，毕竟程序最终都会被转化为计算机能够处理的数据-0和1的组合，但是那样做效率太低下了，所以程序就设计出恰当完备的数据格式，方便程序员通过对数据格式的各种组合来完成信息从现实世界到计算机世界的映射，进而利用计算机进行高效的处理，比如用整型表达整数，用字符串表达文字，用布尔型表达真假对错，用数组表达集合，用对象表达组合信息，而对象中的各个属性又可以是不同的数据类型，概括来说丰富的数据格式就是帮助程序员在计算机世界中准确、高效地表达信息。 6 | -------------------------------------------------------------------------------- /homework/lesson2/dengxy0907.md: -------------------------------------------------------------------------------- 1 | 编程中为什么会有丰富化的数据格式 2 | ================= 3 | ### 1、我对编程的的看法 4 | >如果事物都能数据化，那么通过编程就能定义数据，然后通过调用数据打成目的。 5 | ### 2、数据类型 6 | > 布尔型、数组、字符串、null、资源，目前我只记得这些，我会赶紧复习、学习以跟上进度。 7 | 8 | >关于数据类型为什么有这么多，确实没想过为什么，但是细思起来，确实不同情景下使用适合的类型会方便很多，应该也有方便计算机执行的作用。 9 | ### 3，静态网页 10 | > [我的git网页](https://dengxy0907.github.io/text/) 11 | 12 | > 课程的话我目前只看过一遍，因为时间关系，为了打通流程，仅仅写了一个最简单的页面。 -------------------------------------------------------------------------------- /homework/lesson2/diaozhicong.md: -------------------------------------------------------------------------------- 1 | 2 | #第二次课总结： 3 | ##编程中为什么会有丰富化的数据格式？ 4 | + 编程操作的对象是多种多样的，如名字、数值、属性、关系等。 5 | + 数据格式有数值、字符串、布尔、null和undefined、对象、数组、函数等。 6 | + 我们编程的目的是处理数据，得到结果。这个过程需要时间，而多样的数据格式可供选择与使用，可以缩短时间，节省大量内存，提高运算的效率。 7 | + 丰富的数据格式因为拆分的细，所以使用很灵活。即使碰到复杂的数据格式，也可以用基础类型通过搭积木的方式组合出来。 8 | 9 | + 多样的数据格式方便理解应用。多人协同工作的时候有标准可依、互相之间底层共识相同，大大提高协同工作效率。 10 | 11 | 12 | 13 | 14 | ###个人静态网页 15 | https://sam-tiao.github.io/diaozhicong/ -------------------------------------------------------------------------------- /homework/lesson2/duhongxia.md: -------------------------------------------------------------------------------- 1 | 杜红霞的第二课作业 2 | 3 | 程序的目的：“处理数据 得到结果。” 4 | 5 | 课中用小明的例子来进行了说明： 6 | 7 | 我们通过程序来描述小明，那么就要对小明的数据进行处理。小明的数据包括哪些呢：有他自有的 8 | 基本属性（身高、年龄、体重、性别等数字、文本）再加上他的社会关系（家庭关系、朋友关系、同学 9 | 关系，这些构成数组数组）。那么描述小明的的数据就包含了文本、数字、数组等数据格式。 10 | 11 | 编程中为什么会有丰富的数据化格式？ 12 | 13 | 同样的我们通过编程还会描述其他的事物，相应的为了更准确、更方便的描述我们就会有丰富化的数据 14 | 格式。 15 | 16 | 17 | 18 | 网页地址： 19 | 20 | https://duhongxiaanna.github.io/dream/ 21 | 22 | -------------------------------------------------------------------------------- /homework/lesson2/fangqingyang.md: -------------------------------------------------------------------------------- 1 | ### JS入门第二课 2 | 3 | #### 一切以命名开始 4 | 5 | 不命名的话，我们人，怎么操控那样一堆数据呢？输入了数据，计算机确实是有了数据，但是操纵不方便。就像我们和小明相处过，也确实在大脑里面存有小明的数据了，但如果没有小明这个名字，我们的大脑无法有意识的调出小明的数据，或者为了调用数据自动就换成“这个人”来代替“小明”。又比如，我们在说这是谁干的？别人说了一个名字，听到名字后，我们立刻能够在大脑里面调取出这个名字背后的数据（关系，属性），然后知道是谁干的，之后就有一系列动作。我们要找一个人，知道名字比知道外貌特征更方便，我们查资料，知道资料的名字比知道资料的某个特征更方便。一个名字背后代表着一个数据的集合。以“一”统多，是我们理性思考的能力，名字是“一”，背后的数据是“多”，否则我们将局限在一堆数据里面，局限在很小的范围里面，无法解决问题。写程序的目的是处理数据，得到结果，命名后，将名字与一堆数据挂钩（变量先声明后定义），我们就可以更好的操纵数据，也就可以处理数据了。 6 | 7 | #### 数据格式怎么理解？为什么要有那么多的数据格式？ 8 | 9 | 不同的数据格式能够让我们更好的根据我们需要解决的问题来描述数据，背后对应着不同的处理数据的方法，使我们能最简单最有效的处理数据。假设有多箱苹果，如果我们仅仅需要知道有多少苹果？那么把一箱苹果与一个数字对应会比把这箱苹果与一个字符串对应，来的方便。数字我们就可以让我们自由的使用加减法，然后得到我们想要的结果。随着问题的不同我们可以采用不同的数据格式，如果我们不仅需要知道有多少苹果，还需要知道苹果的种类，还需要。。。 10 | 11 | 多种数据格式是为了让我们更好的处理数据，得到结果。 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /homework/lesson2/fengkai.md: -------------------------------------------------------------------------------- 1 | 为什么会有丰富化的数据格式: 2 | 对于不同场景下的变量或者是数据，能够将彼此相互关联起来，最终分解成机器能够理解的二进制0和1 3 | 4 | 1. 数据格式： 5 | 6 | str 字符串 7 | 8 | int 整型 9 | 10 | float 浮点型 11 | 12 | list 列表 13 | 14 | array 数组 15 | 16 | boolean 布尔型 17 | 18 | object 对象数据 对象变量 组合形的数据 19 | 20 | 2. 变量 21 | 声明变量 22 | 定义（内存） 23 | 赋值 24 | 25 | 3. 变量编程的逻辑 26 | 顺序 27 | 分支（选择） 28 | 循环 29 | 30 | 个人主页： 31 | https://fengkaiwater.github.io/myPage/ 32 | 33 | 纯属个人理解 -------------------------------------------------------------------------------- /homework/lesson2/hanmeng.md: -------------------------------------------------------------------------------- 1 | #这是我的静态网页地址https://menhan.github.io/my_test/ 2 | 目前只修改了链接地址，颜色。 3 | 4 | #第二节课总结 5 | 6 | ##编程中为什么会有丰富化的数据格式？ 7 | 8 | *** 9 | 我的理解，编程就是调用不同的指令，处理数据，最终得到想要的结果。 10 | 在调用指令处理数据之前，要先找到数据，并且要给这些数据起个名字，方便调用。如果只是找到一堆数据，不进行命名，不能被调用，是没有意义的。 11 | 12 | *** 13 | 找到很多数据以后，我们就按照程序语言的要求对数据进行分类，根据数据不的使用要去，定义成不同的格式。 14 | -------------------------------------------------------------------------------- /homework/lesson2/haohu.md: -------------------------------------------------------------------------------- 1 | #编程中为什么会有丰富化的数据格式？ 2 | 3 | - 与现实世界对应: 不一样的东西就有不一样的描述方式，增加程序可读性 4 | - 提高空间利用率: 不同的数据格式占用的空间不同，可根据实际需要分配 5 | - 提高程序的性能: 不同的数据格式适用于不同的需求，使用合适的数据结构能大大增加程序性能 6 | 7 | #部署自己的静态网页 8 | 9 | - [郝户的静态网页](https://venivediveci.github.io/) 10 | 11 | -------------------------------------------------------------------------------- /homework/lesson2/huangqi.md: -------------------------------------------------------------------------------- 1 | ##编程中为什么会有丰富化的数据格式 2 | 3 | ###编程中为什么会有丰富化的数据格式？我个人的理解是这个样子的：“精心选择的数据结构可以带来更高的运行或者储存效率，还有方便代码的调用吧”，我这个样子理解不知道对不对。请老师指正。 4 | 5 | ###我个人主页的地址 6 | 7 | ###https://yearnds.github.io/pande/. 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /homework/lesson2/huyong.md: -------------------------------------------------------------------------------- 1 | #作业一 ：编程中为什么会有丰富的数据格式 2 | 数据格式我的理解是就像英文里面的26个字母，这些字母排列组合沟通了我们要表达的单词，语句，想法； 3 | 丰富的数据格式对应着更多的字母，如果只有3个字母，按照排列着它并不能构成太多的单词，更没有了丰富的思想表达 4 | 对于数据格式同样如此，如果格式不丰富就无法完成程序员对于目标的实现，我猜不同的变成语言应该会有不同的数据格式， 5 | 否则不同的代码在nd环境和浏览器环境怎么会有不同的结果呢，当然格式就对应着解析，同样的格式对于不同的解析器， 6 | 可能会有不同的输出结果，而不同的代码对于不同的解析器可能会有同样的输出结果，这可能也就是不同的实现可以通过 7 | 完全不同的语言和环境来实现的原因吧，我是小白，继续学习吧。 8 | #作业二：对于代码在两种环境中的执行，我今天从上午是十点半开始捣鼓md完成第一次作业，结果弄得我差点 9 | 学习边编程的信心，就是搞不好，我就转而去安装那两个程序，然后问了下群里面，真是一点我就通了，我把代码在 10 | 两种环境中都敲门一部分通过敲代码我发现，我输入的速度实在是太慢了，我记得有一种键盘操作方式能够很快的敲出代码， 11 | 这个我需要找下，同时对于var我的理解是定义，console.log是输出，然后那些间隔啊，标点啊，真的很考验你的输入能力， 12 | 所以肯定有一种适合程序员的敲代码的习惯或者是输入法。 13 | #作业三：静态网页网址：https://huyong007.github.io/LhyOwjVhistoryE/ -------------------------------------------------------------------------------- /homework/lesson2/langjianjun.md: -------------------------------------------------------------------------------- 1 | 第二节课总结 编程中为什么会有丰富化的数据格式？ 2 | 3 | 丰富的数据格式是因程序要处理复杂的现实问题而产生的。 4 | 5 | 比如，字符串是对应生活中的文字的，需要保持原样；而数字则分为整数和浮点数，后者对应数学中的实数；而数组则可对应坐标、数据表格等。 6 | 7 | 正是因为这样的数学处理，电脑程序才能更好地解决问题。 8 | 9 | 作业拖了太久，马上要上课了，请老师原谅我这老学生草率的作业。 -------------------------------------------------------------------------------- /homework/lesson2/leizhen.md: -------------------------------------------------------------------------------- 1 | 编程中为什么会有丰富化的数据格式？ 2 | 3 | 为了高效。 4 | 5 | 不同的格式可以互补短板 6 | 7 | 8 | 我把编程类比成雕刻师傅，数据格式类比成雕刻刀 9 | 雕刻刀的种类也有很多：平刀、斜刀...... 10 | 用一把刀去雕刻当然是没有问题的，但是会用其他的刀，大大提高了效率嘛。 11 | 12 | 13 | 个人主页：https://rainyuzi.github.io/ 14 | -------------------------------------------------------------------------------- /homework/lesson2/lichen.md: -------------------------------------------------------------------------------- 1 | ###编程中为什么会有丰富化的数据格式？ 2 | 3 | 一切从命名开始，从命名开始，我们得以操纵变量和数据。 4 | 5 | 这个世界所有的存在的事物背后都有很多属性、特征。 6 | 7 | 自然语言是人类用来处理特定目的。 8 | 9 | 数据就是语言的编码，从而处理数据，得到结果。 10 | 11 | ####为什么会有丰富化的数据格式？ 12 | 13 | 方便描述对象的特征，有些特征比如身高体重年龄等比较适合用数字来描述； 14 | 15 | 性别、状态比较适合用布尔值来描述； 16 | 17 | 说话的内容可以用字符串的方式来描述； 18 | 19 | 集合性质的数据内容适合用数组来描述等。 20 | 21 | 也就是说不同的数据类型，我们可以使用不同的格式来对应它们，从而制定编程规则来操纵它们为我们实现目的。 22 | 23 | 拥有了不同的属性，我们就可以通过一系列方式将属性存储到对象上面，这样对象就等价于这些属性的集合。 24 | 25 | 26 | ####静态网页 27 | github pages: https://lichen19844.github.io/static-web-page/ 28 | -------------------------------------------------------------------------------- /homework/lesson2/linxiyao.md: -------------------------------------------------------------------------------- 1 | 编程中为什么会有丰富化的数据格式？ 2 | 3 | 编程中有丰富的数据类型，比如数字数据（170）,数组数据（170，120，18）,文本/字符串数据（height），组合数据/对象（height:170,weight:120,age：18）,布尔数据（true or false）等。 4 | 5 | 不同的数据有不同的作用，可以实现多样化的目的。同时，不同的数据本身在系统中的存储、运算、传递效率不同，这些不同的数据类型决定了代码执行的效率。这样说来，编程中我们应该尽量选择简单的数据类型以提高代码执行效率吗？ 6 | 7 | 个人静态网页https://linxiyaolxy.github.io/getting-started-with-javascript-homework-lesson2/ 8 | -------------------------------------------------------------------------------- /homework/lesson2/lipeng.md: -------------------------------------------------------------------------------- 1 | ## 编程中为什么会有丰富化的数据格式？ 2 | 3 | 1 4 | 5 | 对应真实世界的数据状态。 6 | 7 | 比如我的年龄，那就是一个不超过3位数的整数。而提到我喜欢的食物，那么就是一大串了。 8 | 9 | 再比如，描述一个公司的架构，那么就是一层一层的金字塔结构。 10 | 11 | 2 12 | 13 | 统计所有业务中的数据类型，几乎是无限的，但这个无限，用编程语言的有限的数据格式表达出来，这相当于是某种程度格式化的数据，方便计算机高效处理。 14 | 15 | 16 | 17 | 网页地址： 18 | 19 | https://5haydn.github.io/JS-Startup/ 20 | 21 | -------------------------------------------------------------------------------- /homework/lesson2/litao.md: -------------------------------------------------------------------------------- 1 | # 编程中为什么会有丰富化的数据格式 2 | 3 | 标签（空格分隔）： 作业2 4 | 5 | 6 | ---------- 7 | 世间存在的一切事物都要有个名字，即使用一个代号表示，也是对于它的一个命名，所以说命名是一切事物的基础。 8 | 而我们对于这个事物的认识，是通过了解它背后具有的属性、关系等信息获得的，所有这些信息都属于数据的范畴。将这些数据输入到我们的大脑，大脑就相当于电脑的中央处理系统，经过大脑对输入数据进行一系列的运算处理，最终得到我们想要的结果。 9 | 从输入到输出的中间处理过程，就类似在电脑上运行程序的过程。所以说，程序就是：处理数据，得到结果。编程就是要用计算机能识别的语言编写数据代码，让计算机处理运行这些程序，最终得到结果。 10 | 从我们对一个人起名字开始，我们要通过对这个人的属性特质职业等一系列内容的描述，人们才能清楚这个人是谁。由文字形式描述，到格式化方式描述，再到符号化方式、伪代码方式，最后到数据代码方式，经过这一系列的格式变化，我们看到每种格式的作用与不同。 11 | 由名字就引发出变量的定义，名字中包含许多变量，这么一堆不同的属性关系等变量就构成这个名字代表的一个事物，从而我们就识别出是什么事物。这些名字也相当于许多的数据，数据就要对应不同的数值。数据的表现形式，也就是数据格式也很多样化，根据变量的不同呈现出不同的数据格式。总的来说，编程面向的对象就是变量和数据。 12 | 在JS中，首先要声明一个变量，然后再定义这个变量，最后给这个变量赋值。 13 | 14 | [李涛在GitHub上的静态网页][1] 15 | 16 | 17 | [1]: https://www.github.com/litao0715/Melody-0715 18 | 19 | -------------------------------------------------------------------------------- /homework/lesson2/liujun.md: -------------------------------------------------------------------------------- 1 | # 编程中为什么会有丰富化的数据格式？ 2 | 3 | ## 数据格式的种类 4 | 数据格式有许多种，我目前知道的有：布尔型，字符串型，数组，整型，列表等。 5 | 6 | 它们也可以随意组合，任意调用。 7 | 8 | ## 编程为什么会有丰富化的数据格式？ 9 | 10 | 老师讲课时，用定义小明的方式来类比编程里的变量和值。小明作为一个独一无二 11 | 12 | 的个人，有许多只属于他自己的特征，比如，DNA，身高，体重，家庭关系，兴趣 13 | 14 | 爱好等，这些都是用不同的方式表现出来的。这些类比到编程里，我们很容易得出 15 | 16 | 一个结论：单一的数据类型，不能满足我们的编程需要，用单一的数据类型，创造 17 | 18 | 不出一个丰富多彩的世界。我相信没有一个数据类型是多余的，是凭空造出来的。 19 | 20 | 每一个数据类型都有它独特的使用环境。 21 | 22 | 作为一个小白，刚开始学习编程的人来说，我觉得应该弄明白每一个数据类型的用 23 | 24 | 途，找到使用数据类型个最有效方式。以上是我的理解。 25 | 26 | ## 我的个人静态网页 27 | 28 | https://liujun009.github.io/liujun/ -------------------------------------------------------------------------------- /homework/lesson2/liuruyong.md: -------------------------------------------------------------------------------- 1 | # 编程中为什么会有丰富化的数据格式？ 2 | 现实生活就是复杂的，像课上讲的小明的例子，身高是有小数的、年龄一般用整数、朋友关系要用数组表示、每个朋友都是一个独立的对象。。。 3 | 4 | 为了描述现实生活中的问题，就需要相对应的数据类型存储数据。由此抽出了6种原始类型（Boolean,Null,Undefined,Number,String,Symbol)和对象。 5 | 6 | 丰富化的数据格式因为拆分的细，所以使用很灵活。即使碰到复杂的数据格式，也可以用基础类型通过搭积木的方式组合出来。 7 | 8 | 另一方面，丰富化的数据格式也方便人类理解应用。javaScript内建多种数据格式后，可以把格式相关的细节预先处理（例如，字符串拼接，不同类型的转换），使用者就不需要考虑这些细节，简化了编程工作量。 9 | 10 | # 静态网页地址 11 | [Git部署静态页面](https://liuruyong.github.io/jsTest/) 12 | 13 | -------------------------------------------------------------------------------- /homework/lesson2/liushengsi.md: -------------------------------------------------------------------------------- 1 | # 编程中为什么会有丰富化的数据格式？ 2 | 3 | #### 1. 我们为什么要编程呢？ 4 | 5 | 人类的进化史可以说是一部效率的提高史。进入现代文明社会后，我们的现实世界越来越复杂，比之前古老的农耕文明社会不知道复杂了多少倍。然后计算机诞生了！计算机的工作方式让人类社会的很多社会活动的效率有了质的飞跃，也把人类从很多社会活动中解放了出来，比如：复杂的数学计算、产品品质的筛选等等。 6 | 7 | 所以，编程有一个很重要的目的就是从复杂的现实社会抽象出一些具有共性的处理模式，然后把这些处理模式转换成计算机能执行的代码，让计算机去执行，以提升效率或解放人类。 8 | 9 | #### 2. 编程中为什么有丰富的数据格式？ 10 | 11 | 理解了我们为什么要编程后，就不难理解编程中为什么有这么丰富的数据格式了，比如：整型、浮点型、布尔型、字符串、数组等。 12 | 13 | 因为生活中各方面的事情太多，处理起来的方式也各不相同。就好像： 14 | - 新建成一个商场，它的名字叫啥，这种数据往往被抽象成字符串； 15 | - 商场今天收入多少、支出多少、盈利多少，这些是需要进行数值计算的，所以更多的会将这些值抽象成整型或浮点型数据来处理； 16 | - 商场的共有哪几层、每一层都有哪些品牌入驻，这些需要的处理就不是计算了，而是展示出来，或者商场要做其它业务的时候需要知道这些信息，所以这类型数据更多的会被抽象成数组； 17 | - 商场里的品牌哪些是盈利的哪些是亏损的，这些就是“是”还是“否”的问题，基本上会被抽象成布尔型处理； 18 | 19 | 从一个小小的商场就可以看出现实生活中需要处理的业务的复杂度，所以编程中那么丰富的数据格式就是为了能高效处理各种复杂业务，让我们的效率得到最大的提升。 -------------------------------------------------------------------------------- /homework/lesson2/liushengxin.md: -------------------------------------------------------------------------------- 1 | # lesson2 编程中为什么会有丰富化的数据格式？ 2 | ## 2017年8月13日 3 | 4 | 某一方面，我认为程序在一定程度上是真实世界的映射。 5 | 6 | 这就是为什么编程中会有丰富的数据格式。 7 | 8 | 编程中的数据格式包括这几类。 9 | 10 | 数字、文本、布尔、对象、数组 11 | 12 | 真实世界中描述一个事物，大概也需要这几种。 13 | 14 | 比如描述小明的身高，需要177 这是一个数字。描述他是男是女、需要判断、这就是布尔。描述他的感情经历、这估计得一大段话了、这就是文本了。描述他有几套房子、几套车子、去过哪些地方、上过什么学校，这就需要对象和数组了。 15 | 16 | 17 | 而编程语言把这些抽象出来、形成丰富的数据格式，是为了方便计算机进行数据处理。因为编程最后需要变成010101010这样的语言、不同的内容需要严格的定义。 18 | 19 | 通过对数据格式的丰富化、一边方便了人类编程、一边也方便了机器编译。 20 | 21 | 22 | [静态页面链接](https://somexin.github.io/homepage/) 23 | 24 | -------------------------------------------------------------------------------- /homework/lesson2/liyihang.md: -------------------------------------------------------------------------------- 1 | #为什么有丰富化的数据格式？ 2 | 3 | ##数学思想 4 | 编程的数据是基于数学来设计的，有部分数据结构的思想来自数学，基本的自然数，无理数，集合，序列,布尔。 5 | 6 | ##计算机思想 7 | 根据数据的特性结合内存物理特性，把数字分浮点和整形。 8 | 根据软件工程理论，出现了类和对象 9 | 设计程序语言时，把未定义的数据为NULL，Undefine 10 | 11 | ##世界的原生数据 12 | 字符串 13 | 14 | #附：数据结构 15 | 基本数据结构（数字，字符串） 16 | 列表，字典 17 | 对象 18 | 19 | #静态页面 20 | https://baidang201.github.io/gitPageTest/ 21 | 22 | -------------------------------------------------------------------------------- /homework/lesson2/luoruijun.md: -------------------------------------------------------------------------------- 1 | # 编程中为什么会有丰富化的数据格式 2 | 数据格式有：基本数据（数字、文本、布尔等）、数组、组合数据（对象数据），不同的类型的数据操作方式不同。编程要有不同的数据格式，估计是和计算机对数据的辨识有关，处理不同类型的数据是用不同的方式的，不同数据类型所占用的资源（内存）也是不同的，另外可能也是考虑到处理效率的原因，因而有不同的数据格式。 3 | 4 | https://sunrise81.github.io/sunrise-personal-web/ -------------------------------------------------------------------------------- /homework/lesson2/panyong.md: -------------------------------------------------------------------------------- 1 | # 【第二次作业】变量和值 2 | 3 | 【作业要求】 4 | 1. 熟读getting-started-with-javascript/study/lesson2/smaple_code.js代码。用node环境和浏览器环境运行一下代码（注意：浏览器运行请使用my_personal_info_page.html） 5 | 2. 写一遍课程总结，题目为：编程中为什么会有丰富化的数据格式？ 6 | 3. 如果有问题，在总结中把你的问题罗列出来，我会做解答。 7 | 8 | 9 | ## 总结 10 | ``` 11 | 编程中为什么会有丰富化的数据格式？ 12 | ``` 13 | 14 | ``` 15 | 答：世界多样，编程时需要多样化的数据类型来更好的表达。数字、文本、布尔、对象、数组，在计算机底层不过都是0和1，只是在编程语言上抽象出了丰富的数据类型，方便人与人之间去沟通表达、阅读理解。 16 | ``` 17 | -------------------------------------------------------------------------------- /homework/lesson2/qiujingyu.md: -------------------------------------------------------------------------------- 1 | ## 编程中为什么会有丰富化的数据格式？ 2 | 3 | #### 学习代sample_code.js码心得 4 | 5 | + 用var来声明变量，用的是赋值语句。 6 | + 定义变量时，"=" 不是代表等于，而是指“得到或者赋值”，等于是"=="，严格相等是"==="。变量不需要单引号或者双引号。赋的值如果是字符串则要添加引号，其他的如数字、布尔值则不需要。赋的值还可以是对象，用花括号括起来；也可以是数组，用中括号括起来。 7 | + 变量名如果是两个或以上的单词组成时，一般从第二个单词开始，每个单词的首字母是大写，如isMan、myLikeFoods 。 8 | + 双斜线//之后的内容都属于注释，不会在终端显示出来。/* */之里的内容也属于注释。 9 | + console.log()是函数来的，用来输出代码结果 10 | + \n 是换行符 11 | + 数组的里的数据排序是从0开始的，也就是说如果需要找出第一个数据，不是[1]，而是[0]，[1]是第二个数据。 12 | 13 | #### 丰富化的数据格式 14 | 数据格式有数字、文本、布尔值、null和undefined、对象、数组、函数等。往大的说，丰富的格式才能对应复杂的现实情况。往小的说不同的格式可以用来描述不同的情况；通过运算符、语句来定义操作这些格式，达到处理数据，得到结果，实现功能的目的。 15 | 16 | #### 个人静态网页地址 17 | https://qiuyixiu.github.io/yixiu/ 18 | -------------------------------------------------------------------------------- /homework/lesson2/shaozhen.md: -------------------------------------------------------------------------------- 1 | ## 编程中为什么会有丰富化的数据格式 2 | 3 | ### 数据类型的划分有助于更好的分配管理内存，节省内存的开支。 4 | ### 丰富的数据格式可以满足描述对象的需求，用多样化方式来描述数据。 5 | ### 多样化的数据格式，使程序可以更准确的处理抽象出来的数据，得到想要的结果。 6 | 7 | 8 | 9 | 10 | [静态网页](https://naliang.github.io/naliang/) -------------------------------------------------------------------------------- /homework/lesson2/shenzhili.md: -------------------------------------------------------------------------------- 1 | #编程中为什么会有丰富化的数据格式 2 | JS中的数据格式有数字(number)，字符串(string)，布尔(boolean)，对象(object)，数组(array)。这些数据格式，每一个都有它的用处，但这些数据格式都是准确的描述/表达的基础。 3 | **存在即是合理————一件事物经受住了时间的考验，一定有它的道理。** 4 | 笑来老师讲过一个流程图的故事，曾经，人们认为流程图至少要5个元素，这一说法流行了好几年，直到后来有一个人(具体人名忘记了~)提出,描述流程图只需要三个元素。分别是：顺序、条件、循环。这个理论改变了世界，刷新了人们的认知。事实上，全世界的所有流程图分解到最后确实只剩下这三个类型。换句话说，这三张流程图是流程图界的基础元素，管他多复杂的流程图，都可以用这3个元素组合搭配构成。 5 | 说回到JS中为什么会有丰富化的数据格式。道理是类似的，可能在过去，数据格式要么冗余或简单的过分而缺少必要功能。经过程序员的不断增删，修正，最后留下来的可以说是简单、有效、必要的数据格式(至少目前来看是这样的)。 可以说，之所以有今天这么些个数据格式，是前人经过实践总结出来的。这些数据格式在实践中被无数次地证明是有效的、被需要的。 编程中丰富化的数据格式对应着实践过程中的需要(必要)。 6 | 7 | 以上。 8 | ------- 9 | github上的静态网页: 10 | ![优秀站点收录 11 | ]https://zjutszl.github.io/ 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /homework/lesson2/sophieQi.md: -------------------------------------------------------------------------------- 1 | ### 编程中为什么会有丰富化的数据格式？ 2 | 3 | >数据格式（data format）是数据保存在文件或记录中的编排格式。可为数值、字符或二进制数等形式。由数据类型及数据长度来描述。 4 | 5 | 在课程中的一个例子，小明是不是一个具体的人。答案：不是。 6 | 7 | 生活中存在着很多小明，那怎样来区分小明？ 8 | 9 | 用构成小明的数据来区分。包含小明自己的属性和关系组合。比如小明的身高、体重、年龄、DNA、家人、朋友等。 10 | 11 | ![](https://i.loli.net/2017/08/17/599541a48e920.jpg) 12 | 这些变量使用了不同的数据格式。 13 | 14 | ## 程序的目的是——处理数据，得到结果 15 | 16 | ### **对变量先声明后定义，再给这个变量赋值。** 17 | 18 | **数据类型是与程序中出现的变量相联系的数据形式。** 19 | ![](https://i.loli.net/2017/08/17/599542846346b.jpg) 20 | >常用的数据类型可分为两大类。 21 | 22 | >①简单类型。其数据的结构非常简单，具有相同的数学特性和相同的计算机内部表示法，其数据的逻辑结构特点是只包含一个初等项的结点.通常有五种基本的简单类型：整数类型、实数类型、布尔类型、字符类型和指针类型。 23 | 24 | >②复合类型。或称组合类型或结构类型，是由简单类型用某种方式组合而成的。根据不同的构造方法，可构成以下不同的数据结构类型。 25 | 26 | ## 静态网页[my-page](https://klpk011.github.io/js_blog/) 27 | 还很简单，之后会继续更新。 28 | -------------------------------------------------------------------------------- /homework/lesson2/tangjianfeng.md: -------------------------------------------------------------------------------- 1 | ##编程中为什么会有丰富化的数据格式？ 2 | 3 | 我目前知道的数据格式有byte,int,float,string,bool,array,text,double,currency,date,single,object……等等 4 | 为什么编程语言有这么丰富化的数据格式？ 5 | 首先分类会比较方便程序员知道这个数据是什么，便于操作； 6 | 其次数据类型明确了类型的值空间和词法空间，数据类型也提供了多种操作； 7 | 第三，数据类型为编译器提供了检查代码错误的能力； 8 | 第四，计算机比较笨，很多我们不言自明的人类语言中的数字或者文字，需要让它知道含义了才能正确处理数据，比如数据"19"，这个是int还是字符串，还是一个16进制代表的一个Unicode字符？如果没有限定数据的类型，计算机是不会知道其中的分别的； 9 | 第五，通过数据类型的约束可以减少很多非正常的数据的存入，比如int类型的列不应该存入字符串； 10 | 第六，用相应的数据格式就不会浪费宝贵的存储空间和计算能力。 11 | 12 | 13 | 14 | 想看我的主页？请[点这里](https://tangvwin.github.io/js-test/)访问我的github的js学习主页 15 | -------------------------------------------------------------------------------- /homework/lesson2/wangshasha.md: -------------------------------------------------------------------------------- 1 | # lesson2 homework 2 | 3 | 标签（空格分隔）： js 4 | 5 | --- 6 | 7 | #为什么有丰富化的数据格式 8 | ##数据类型 9 | 课上提到的数据类型包括整型、字符型、布尔型，手边正好有一本计算机科学概论，在数据类型这边说到，GIF、JPEG、HTML这样的类型目前还没有成为程序车技的通用原语，可能会快会通用，所以丰富的数据类型是为了尽可能高效的表示不同的信息。 10 | ##数据结构 11 | 数组是数据结构，去搜索的时候看到一篇文章http://www.ruanyifeng.com/blog/2009/05/data_types_and_json.html，从结构上看数据有三种类型：标量、序列、映射，标量就是常用的数据类型；序列是数组、列表；映射是字典（就是对象的表示方式？）。数据结构描述了数据之间的关系。 12 | ##数据格式 13 | 所以数据格式 = 数据类型 + 数据结构，后面课上也讲到，用不同的数据格式是为了节省存储空间、提升执行效率。 14 | 15 | 静态网页链接：https://shashawang.github.io/my-first-webpage/ 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /homework/lesson2/wangwei.md: -------------------------------------------------------------------------------- 1 | ## 用node环境和浏览器环境运行一下代码 2 | >#### 1. node环境 3 | ![node](http://a3.qpic.cn/psb?/V10yXgCs06YSTK/4P2Eve64Hhw5LzUPrTCmfAHiV3zThY7kNdHa2JXvpgI!/b/dG0BAAAAAAAA&bo=mQSAAgAAAAARCCA!&rf=viewer_4) 4 | 5 | >#### 2. 浏览器环境 6 | ![brower](http://a3.qpic.cn/psb?/V10yXgCs06YSTK/jKd0URKxlydo6u.HbSybPWCcag2exdTfG9mEGTWWRVY!/b/dD0BAAAAAAAA&bo=uASAAgAAAAARCAE!&rf=viewer_4) 7 | 8 | ----- 9 | 10 | ## 写一遍课程总结，题目为：编程中为什么会有丰富化的数据格式？ 11 | > 这样才能够尽可能完整的表达现实的世界 12 | > 不不同的数据类型决定了了代码执⾏行行的效率。 13 | 14 | >效率包括： 15 | >> 存储效率，计算效率，传递效率 16 | 17 | 18 | ## 在github上部署自己的静态网页，把网页地址放在总结文档里 19 | > https://lightww.github.io/getting-started-with-javascript/ -------------------------------------------------------------------------------- /homework/lesson2/wangying.md: -------------------------------------------------------------------------------- 1 | 第二次作业 2 | 3 | 1.运行代码如下 4 | 5 | ![作业2-1-20170814](E:\xinsdx\JavaScript\作业2-1-20170814.png) 6 | 7 | ![作业2-2-20170814](E:\xinsdx\JavaScript\作业2-2-20170814.png) 8 | 9 | ![作业2-2-201708141](E:\xinsdx\JavaScript\作业2-2-201708141.png) 10 | 11 | 12 | 13 | 2. 课程总结： 14 | 15 | 编程中为什么会有丰富化的数据格式 16 | 17 | 1.因为在操作数据之前需要先声明定义变量，而变量就像人一样通过自身的属性和它与其他数据的关系来定义以方便机器辨识。当数据的格式丰富多样的时候才可以多维度描述变量，并使存在细微不同的变量的值成为不同的目标来进行数据处理。 18 | 19 | 2.不同的数据类型存储时占用内存不同，且其代码执行效率不同——存储效率，计算效率和传递效率不同，满足不同的数据处理需求。 20 | 21 | ​ 22 | 23 | 3. 个人网站URL：https://maggiewong27.github.io/StaticSite/ 24 | 25 | ​ -------------------------------------------------------------------------------- /homework/lesson2/wenliuxin.md: -------------------------------------------------------------------------------- 1 | # 编程中为什么会有丰富化的数据格式？ 2 | 3 | 现实世界有很多样化的数据，一个人自身就有不同的数据，比如代表他身体的数据——属性：身高、体重……；代表他社会关系的数据——关系：家庭、朋友…… 4 | 5 | 而这些数据又可以用各种方式去描述——文字、格式化、符号化、伪代码。 6 | 7 | 在编程中，要用上这数据就要给他们命名，命名的作用就是为了操作这些数据。比如，吃晚饭的时候，家人会喊：温刘欣，出来吃饭。 8 | 9 | 命名能把人和名字关联起来，关联名字和目标——就是名字和人之间的关系。温刘欣就是对应一堆数据（属性、关系……），这堆数据等于温刘欣。 10 | 11 | 在脑子中通过识别他人的属性等数据找到对应到的人，就是关联人和名字的过程。 12 | 13 | 由于程序的目的是处理数据得到结果，为了处理现实生活的各种数据，编程用也就有了丰富的数据格式，而数据包括：基本数据、集合数据（对象数据）、数组数据。 14 | 15 | 16 | 个人网页：https://liuxinaugustuwen.github.io/htmlTest/ 17 | -------------------------------------------------------------------------------- /homework/lesson2/wenyunxin.md: -------------------------------------------------------------------------------- 1 | # 第二节课程总结：编程中为什么会有丰富化的数据格式？ 2 | 3 | ## JavaScript中的数据类型 4 | 5 | * 数字:Number 6 | * 文本：String 7 | * 布尔：Boolean 8 | * Null 9 | * 数组：arry 10 | * 对象：Object 11 | 12 | ## 编程中为什么会有丰富化的数据格式？ 13 | 计算机的运行是二进制机制。丰富化的数据格式能够有效地对不同的数据对象进行储存，每种不同的数据类型在计算机里都有自己不同的进制表现形式。对输入的对象进行数据类型归属判断，然后再进行二进制的处理转换，进而能够被计算机进行运算处理。 14 | 15 | ## 问题： 16 | * 不同的数据类型在计算机里面处理的效率是不是不一样？ 17 | 18 | ## 总结 19 | 进一步掌握github的协同操作，开始使用Sublime编辑器写文档、编代码，学会简单的markdown写作语法。 20 | 21 | ## 个人主页地址 22 | [温云新](https://wenyunxin.github.io/my_page/) -------------------------------------------------------------------------------- /homework/lesson2/wukuipin.md: -------------------------------------------------------------------------------- 1 | #### 多样化的数据格式（数字、文本、布尔、对象、数组） 2 | >每一个目标对象都有很多个数据，要描述和控制这个目标之前，要先定义变量，用于收集这个目标的数据或控制目标时找到控制目标的控制器。多样化的数据格式能更好地描述或指定一个目标。我们编程的目的就是，“处理数据，输出结果”。 3 | 4 | >一组数据，没有指定的目标，没有用来描述具体的对象，这样的数据是没有任何意义的。所以，一切从命名开始！ 5 | 6 | #### 有个问题，JavaScript对象是用Hash结构存储的么？ 7 | >我发现JavaScript对象和Hash表的数据结构非常相似。于是Google一下，找到一篇文章，作者根据运行效率论证JavaScript对象是以Hash结构存储的（不过有些地方没看懂）。 8 | 文章地址：https://lz5z.com/JavaScript-Object-Hash/ 9 | 10 | Antarts个人静态网页：https://antarts.github.io/Study_Note/ 11 | -------------------------------------------------------------------------------- /homework/lesson2/xianengqi.md: -------------------------------------------------------------------------------- 1 | +# 编程中为什么会有丰富化的数据格式？ 2 | 3 | +因为丰富化的数据格式易于区分和读取。 4 | +## 第二节课里重点是 5 | +**一切以命名开始，好的命名更易于他人读取** 6 | *** 7 | +在编程中不断的要问自己，这行代码为什么能在这里运行，能否用这行代码运用到其他层面上去，是否这串代码对我们真的有价值？ 8 | +### 这位同学解释的挺好的，以下我引用了同时也更改了一部分~ 9 | >代码不重要，解决问题的方法更重要。 10 | 任何时候都不能忘记'思想'是前提，你要知道你为什么做这件事？这件事的本质是什么？（要运用"第一性原理思考"吗，可以试试）为什么学这个东西？（因为有需求和目标，所以就有内在动力），有没有更好的方法去做？（大道至简，不变的永远是真理，任何事物都有他的道理，老师教的是内功心法，我们同时也要把马步扎好，基本功不扎实，别人一个扫堂腿，那就是有辱师门啊。嘻嘻） 11 | +### 遇到的问题有哪些？ 12 | +问题很多，问不出来，我先自己摸索哈， 13 | [静态页面链接]（https://xianengqi.github.io/test/） 14 | >链接我照打了"一淼"同学的代码，做出来的，哈哈。 15 | -------------------------------------------------------------------------------- /homework/lesson2/xugaoyang.md: -------------------------------------------------------------------------------- 1 | 昨天我帮你们梳理了变量和值之间的关系。下面梳理一些知识点供大家参考，好好利用周末的时间把这块啃下来。 2 | 3 | 1. 多样化的数据格式（数字、文本、布尔、对象、数组） 4 | 2. 多样化的数据格式的操作方式。 5 | 6 | 以上内容网上有很多教程，如果你想买书，我推荐“JavaScript权威指南—淘宝前端团队翻译的那本” 7 | 8 | 【作业要求】 9 | 1. 熟读getting-started-with-javascript/study/lesson2/smaple_code.js代码。用node环境和浏览器环境运行一下代码（注意：浏览器运行请使用my_personal_info_page.html） 10 | 2. 写一遍课程总结，题目为：编程中为什么会有丰富化的数据格式？ 11 | 3. 如果有问题，在总结中把你的问题罗列出来，我会做解答。 12 | 13 | 【附加作业要求】 14 | 15 | 1. 在github上部署自己的静态网页，把网页地址放在总结文档里。 16 | 17 | 【提交方式】 18 | 1. 请向getting-started-with-javascript项目发起pull request。 19 | 20 | https://github.com/xugy0926/getting-started-with-javascript 21 | 22 | 2. 文档格式，markdown。 23 | 3. 提交homework/lesson2目录下。 24 | -------------------------------------------------------------------------------- /homework/lesson2/yangtieming.md: -------------------------------------------------------------------------------- 1 | # 编程中为什么会有丰富化的数据格式？ 2 | 3 | >"数据是放在内存中的，变量是给这块内存起的名字，有了变量就可以找到并使用这份数据。但问题是，该如何使用呢？"——网络某人 4 | 5 | 我觉得网上找的的这句话似乎帮我更清晰的认识了**数据**、**内存**、**变量**三者之间的关系。 6 | 7 | + 内存，应该就是数据存储器。1kb的内存=1024个字节。我们把这1024个字节看成是从上往下的1024个格子。 8 | + 我们先申明一个变量，就是给将要进行存储的这块内存（1个或几个格子）进行命名。所以**一切以命名开始!** 9 | + 我们再定义这个变量，就是告诉计算机，我存进去的是什么，这个东西有多大。是整数，字符串，图片，音频还是别的什么？这就是**数据类型**。 10 | 11 | ### 那么为什么要对数据进行分类？ 12 | 1. **便于计算机存储和读取**。 13 | 因为每种类型的数据所占用的内存空间（格子数）是不同的，分类后便于计算机快速存储和读取。 14 | 比如：int 表示整数，在存储时占用4个字节（4个格子） 15 | char 表示字符，在存储时占用1个字节（1个格子） 16 | 如果计算机一个一个格子的去存储和读取数据，再去判断它是什么就显得效率低了。 17 | 2. **便于计算机对数据进行使用**。 18 | 如果计算机读取的数据是int 整数，它就知道这个数据是要进行数学计算的。 19 | 如果计算机读取的数据是string 字符串，它就知道这个数据是用来显示出来的。 20 | 21 | 以上是我对数据格式的理解，请老师指正! -------------------------------------------------------------------------------- /homework/lesson2/yangyepeng.md: -------------------------------------------------------------------------------- 1 | ## 编程中为什么会有丰富化的数据格式？ 2 | 3 | 首先，对于编程来说，不管是哪一种语言，都逃不开一个话题，就是数据类型。 4 | 一般都会有这些数据类型：整形，浮点型，布尔类型，字符串类型，数组类型和对象类型等。 5 | 6 | ### 那么为什么需要区分不同的数据类型呢？ 7 | 简单的理解应该是为了对信息进行分门别类，方便计算机进行运算处理。 8 | 另外一层理解，应该也是为了方便编写和读取程序的人对程序语言的理解，特别到了面向对象的语言，是以更接近人脑的思考方式抽象出计算机的语言。 9 | 10 | #### 对应到生活中的例子 11 | 12 | - 有时候我们会做一些数字的计算，比如，1 + 2；当然也不一定都是整数，所以也会有涉及到小数点：1.5 + 2.5；这就是所谓的整形和浮点型。 13 | - 当然，我们不可能一直用数字来描述事物，比如你的名字，正常情况下是中文或者英文，我们可以理解为一串字符。这就是所谓的字符串。 14 | - 我们也会遇到类似的情景，比如，某某机构要求你填写个登记表。这时候表上面通常会有你的个人信息；比如姓名，生日，出生地点，年龄，性别等等。这个就可以理解为对象数据。填写的信息通常就是跟登记人相关的属性，可以用来判断是不是你这个人的一些信息。 15 | 16 | #### 听完第三节课之后，有了更深的理解 17 | 老师在第三节课提到，不同的数据类型，占用的内存是不一样的，计算机在存储和读取不同类型的数据也是有些不同的。 18 | 那么用什么样的数据需要进行考究了，因为它会影响计算机的运行效率，也就是你程序的运行效率。 19 | 20 | #### 我想着两点原因应该就是为什么需要丰富化的数据格式了吧，如果理解有误还请老师指正！ 21 | -------------------------------------------------------------------------------- /homework/lesson2/yimiao.md: -------------------------------------------------------------------------------- 1 | ### 第二课课程总结：编程中为什么会有丰富化的数据格式？815 2 | 3 | #### 收获 4 | 1. 熟悉了git的用法，之前也学过ruby，但是不是很清楚，但是发现老师这种教学方式很容易就理解了。 5 | 2. 类比的方式很容易让我理解抽象的概念，用熟悉的事物来理解抽象。 6 | 3. var output ; 7 | output = "xx" 了解数据与变量的关系，如何关联 8 | 先声明，再定义 9 | 4. 如何在网页上运行javascript代码：通过 console；在网页的source里有snippets可以新建一个文件比如am.js 10 | 5. 在不同的环境里（浏览器环境和node环境），有一些命令是有差异性的比如alert只有在浏览器才有。 11 | 6. 同步更新fork项目的步骤： cd——git remote add upstream xxx——git checkout master--git fetch upstream--git merge upstream/master--git push origin master 12 | --- 13 | #### 关于代码部分 14 | > var age = 18, weight = 130; 平行排列 15 | - 四种命名方式 why? not know yet 16 | - 数组类型 17 | - 对象变量：= { 18 | title：**注意不是等号** 19 | } 20 | - 输出 21 | - console.log('\n')试出来的结果可能是空行 22 | - 对象数组非常重要 23 | 24 | #### 编程中为什么会有丰富化的数据格式？ 25 | 我觉得因为数据的类型非常多，数据格式多则可以操纵的数据就多。 26 | 他们组合的类型也更多。 27 | -------------------------------------------------------------------------------- /homework/lesson2/yongfei.md: -------------------------------------------------------------------------------- 1 | ## 编程中为什么会有丰富化的数据格式 2 | 3 | * 编程中有大量的数据变量，一切以命名开始，先声明变量，再定义变量，给变量赋值。 4 | * 多样化的数据格式包括：数字、文本、布尔、对象、数组... 5 | * 有了这些丰富的数据格式，我们就能更清楚的定义变量，可以让变量做更多的事，而且这些数据格式也足够简单明了，易于理解。 6 | 7 | ### [我的网页](https://fenglaishuzhu.github.io/jslesson2/) 8 | -------------------------------------------------------------------------------- /homework/lesson2/youshilei.md: -------------------------------------------------------------------------------- 1 | # 第二课作业 编程中为什么会有丰富化的数据格式？ 2 | 3 | ## 一、JS数据格式有哪些 4 | 5 | js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Null,Undefined）,和一种混合数据类型（Object）。 6 | 7 | ## 二、丰富化的数据格式的理解 8 | 丰富的数据格式主要有以下特点： 9 | - 不同的数据类型占用不同的存储空间。通过把数据归类，可以节省存储空间。 10 | - 将不同的数据类型进行归类，可以提升计算效率。 11 | - 数据格式的丰富多样可以对应不同的事件类型，处理不同的生活场景。 12 | 13 | ## 三、我制作的静态网页 14 | 15 | [我的静态网页](https://yousl.github.io/mypage/) -------------------------------------------------------------------------------- /homework/lesson2/yueruiqi.md: -------------------------------------------------------------------------------- 1 | # 作业2 2 | 3 | JS课程2总结 4 | --- 5 | 编程中为什么会有丰富化的数据格式？ 6 | 7 | **数据** 8 | 9 | 程序就是输入数据，处理数据，得到结果的过程。 10 | 为了便于处理数据，就需要把数据分类，这样就有了不同的数据格式，同时运用特定的数据格式时，对比混合使用数据，函数运算也可以相应简化，节省系统资源。 11 | 12 | 13 | **静态网页** 14 | - https://yoricci.github.io/YRQ-Static-Web/ 15 | -------------------------------------------------------------------------------- /homework/lesson2/yujianke.md: -------------------------------------------------------------------------------- 1 | 1: https://choudac.github.io/hi/ 2 | 3 | 2: 数据格式是程序设计语言封装好的对象，以便调用。 4 | -------------------------------------------------------------------------------- /homework/lesson2/zhangqian.md: -------------------------------------------------------------------------------- 1 | ## 编程中为什么会有丰富化的数据格式？ 2 | 3 | ### 用名字来操纵人 4 | 先要赋予一个人名，用这个人名去执行一系列行为。 5 | ### 人的属性 6 | 同样都是人，为什么我妈妈不是你的妈妈，你是你妈妈的孩子而我不是。这是因为人与人的属性不同。 7 | 8 | 换言之，编程世界里，需要我们去创造一个“人”，给它取一个”姓名“-变量，给”姓名“-变量设定一些”属性“-值。 9 | 10 | 例： 11 | 12 | var output = "hello, js" 13 | 14 | var output ; 15 | 16 | output = "hello,js" ； 17 | 18 | - 先声明 19 | 20 | - 在定义 21 | 22 | - 赋值 23 | 24 | >数据格式是数据保存在文件或记录中的编排格式。数据类型是与程序中出现的变量相联系的数据形式。 25 | >常用的数据类型可分为两大类。 26 | >①简单类型:整数类型、实数类型、布尔类型、字符类型和指针类型。 27 | >②复合类型：数组类型、记录类型、集合类型、文件类型。 28 | 29 | 丰富的数据格式是为了清楚的定义变量，更准确的得到数据输出结果。 30 | 31 | [静态网页](https://zhang-qian.github.io/jingtaiwangye/) 32 | 33 | 34 | -------------------------------------------------------------------------------- /homework/lesson2/zhaokaili.md: -------------------------------------------------------------------------------- 1 | # 编程中为什么会有丰富化的数据格式？ 2 | ## 什么是数据格式？ 3 | 搜狗百科： 4 | >数据格式（data format）是数据保存在文件或记录中的编排格式。可为数值、字符或 二进制数等形式。由>数据类型及数据长度来描述。其确定应满足一定条件：①保证记录所需要的全部信息；②提高存贮效率，保证存贮空间的充分利用；③格式标准化，保证有关数据处理系统间数据的交换。根据 数据记录长度的特点，一般分为定长格式和变长格式。前者文件中记录具有相同的长度，后者长度由记录值长短确定。 5 | 6 | ## 为什么要有多种数据格式？ 7 | 我觉得既然数据格式是由数据类型和数据长度来描述，那么就可以从这两个角度来分析。 8 | ### 为什么要有不同的数据长度 9 | 个人理解数据长度也是我们在声明变量的时候要在内存上开辟的空间的大小，因为早期的计算机性能偏低，为了提高计算机的运行效率，需要对计算机的内存进行精打细算，所以要根据实际情况来选择合适的数据长度进行存储数据，避免过多的占用内存空间。 10 | ### 为什么要有不同的数据类型？ 11 | 因为现在都是面向对象开发，所以我觉得不同的数据类型可能是为了描述不同的对象方便吧。 12 | 编程中，我们要描述各种各样现实生活中的对象，比如音频，文字，视频等，他们本身是多姿多彩的，所以我们在编程中也要开发多种数据类型，用来更好描述现实生活中不同的对象。 13 | # 我的静态网页链接 14 | [https://luckary.github.io/test/](https://luckary.github.io/test/) 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /homework/lesson2/zhaoyinan.md: -------------------------------------------------------------------------------- 1 | 第2次作业 2 | 赵一楠2017.08.16 3 | 不懂html，只能先把老师的网页复制过来先，我的静态网页地址：https://zhaoyn7.github.io/testWebsite/ 4 | 5 | 编程中为什么会有丰富化的数据格式？ 6 | 7 | 赵一楠 2017/8/16 8 | 数据格式有多种多样，比如：数字、数组、对象，数据是由变量和对应的值所组成的。有了变量，我们就可以去操控所有的数据，让它为我所用，比如组成一个有意义的集合体，比如对一个人所有特点的的描述。然后所有的数据，不同类型的数据，是如何构建而成程序的呢？这还是个问题，需要随着后继不断深入的学习。 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /homework/lesson2/zhengchengyan.md: -------------------------------------------------------------------------------- 1 | ## 编程中为啥会有丰富的数据格式？ 2 | ### 因为 有需要 3 | ### 编程干的活儿是处理数据来给出结果，而单一的数据格式无法描述清楚所有的数据，或即使将不同类型的数据勉强描述了，进行编程处理时会较复杂。数据格式也需要迭代优化。 4 | *** 5 | ### 举个例子 6 | Python中的列表这一数据格式很强大，但却有元组这一和它外表很类似的数据格式。它俩在外表上的唯一区别是列表使用中括号而元组使用小括号。 7 | 8 | 那为啥需要元组呢？ 9 | 10 | 原来呀，列表中的数据是可变的，啥时候修改都可以，而元组中的数据是不可变的，一旦创建，就拒绝任何修改啦。类似于国家下发的红头文件，老百姓查看也好评论也罢，但就是不能直接修改。 11 | 12 | 因此，当需要使用不可修改的数据时（例如：目标值），元组就派上用场啦。 13 | 14 | 15 | *** 16 | 17 | ### GitHub上部署的个人网页链接 [https://powerzcy.github.io/personal-portal/](https://powerzcy.github.io/personal-portal/) 18 | -------------------------------------------------------------------------------- /homework/lesson2/zhouhong.md: -------------------------------------------------------------------------------- 1 | 编程中为什么会有丰富化的数据格式? 2 | 第一次接触编程，安装一个nvm就鼓捣了几个小时，数据格式，这个概念当然也是第一次接触到，我思考了一下，并查看了少数同学作业的答案，我觉得对于我这种超级 3 | 小白来说，要理解这个概念，类比，不失为一种很好的方式，就是真实世界中，需要用名词、动词、形容词、副词等描述、表达这个世界，当然程序世界也一样，因为程序就 4 | 是要处理数据，要数据肯定就有很多的格式了，才能很好的表达格式，全方位的表达的数据的内容。就是小明一样，从很多方面来描述他。 5 | 6 | 我的静态网址：https://zhouhong5201.github.io/zhouhong555/ 7 | -------------------------------------------------------------------------------- /homework/lesson2/zhouwenming.md: -------------------------------------------------------------------------------- 1 | # 内置库和第三方库 2 | 3 | ## 这里的”全局对象“（global objects）（或者标准内置对象）指的是在全局作用域（global scope）中的对象（仅当未使用 ECMAScript 5 严格模式时！否则只会得到undefined）。全局对象本身可通过 this 操作符在全局作用域中获得。实际上，全局作用域就是由全局对象的各个属性组成的（包括继承来的属性）。 4 | 5 | ## Lodash, Moment, Axios, Async … 等等, 这些非常有用的 JavaScript 库。你可能会在你的很多 Vue.js 应用中使用它们。 6 | -------------------------------------------------------------------------------- /homework/lesson2/zhuningning.md: -------------------------------------------------------------------------------- 1 | # 第二课作业 编程中为什么会有丰富化的数据格式？ 2 | 3 | [静态页面链接](https://sjdoudouzhu.github.io/myPage/) 4 | 5 | ## 数据格式的种类 6 | 数据格式有：布尔型，字符串型，数组，整型，列表等。 7 | 8 | 9 | ## 丰富化的数据格式 10 | 11 | 我认为丰富化的数据格式相当于规则约束，制定规则为了更好的传递信息和快速的数据，更高效的得到结果，方便计算机高效处理数据效率。利用格式化和符号化的方式，则可以让人更加轻松的理解数据。 12 | 13 | 14 | 15 | ## 一切从命名开始 16 | 17 | 通过命名，我们可以去操纵数据。有了数据，我们就可以通过编程的手段对数据进行处理，然后得到我们想要的结果。命名一定要有意义，方便记忆和不容易出错，也方便阅读和传播。 18 | 19 | -------------------------------------------------------------------------------- /homework/lesson2/zhuyongjin.md: -------------------------------------------------------------------------------- 1 |  2 | ### 问题：编程中为什么会有丰富化的数据格式？ 3 | 回答：在回答任何一个问题之前先得了解问题中出现的概念，这里面有 4 | 5 | >**编程** 这个概念 6 | 7 | >**数据格式** 这个概念 8 | 9 | 10 | #####维基百科解释： 11 | >**编程** 即程序设计，就是以程序设计语言为工具去分析、设计、编码、测试、除错等 12 | 13 | >**数据格式** 即文档格式 14 | 15 | 16 |
17 | 18 | ### 结合我自己的理解 19 | 20 | 编程本身是用计算机的语言来描述这个世界，进而解决问题。而整个世界多种多样，需要用到多种数据格式。打个比方来说：身高170cm, 学生 一个是数字170， 一个是文本学生。 21 | 22 | 23 | [静态页面]（https://zzzyyyyjjj.github.io/text/） 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /homework/lesson2/第二次作业.md: -------------------------------------------------------------------------------- 1 | #一切从命名开始 2 | 编程中，要不断地调用某些变量，这些变量就是给不同的数据命名的结果。有了名字，就可以调用，不然叫小明难道说：170的身高，120斤的小伙子吗？ 3 | 命名了，就要用，不用干嘛要命名？ 4 | 5 | ##本次作业 6 | ###1.编程中为什么会有丰富化的数据格式？ 7 | 之所以有丰富的数据格式，就是为了准确应对现实世界，并不是为了丰富而丰富，也不是为了增加学习编程的门槛。 8 | 数字是为了定量，就像身高多少，体重多少一样。 9 | 文本可以用来描述和说明。 10 | 布尔型是为了判断，比如小明是男人还是女人，判断出来后，再根据不同性别做不同结果处理。 11 | 对象是伴侣...涵盖了为了定义她所包含的数组、文本描述等。 12 | 数组是由一系列值组成。 13 | 14 | ###2.如果有问题，在总结中把你的问题罗列出来，我会做解答。 15 | 在vscode上写了老师的代码，不过却不知道如何运行。调出下拉菜单总是提示运行错误，像老师一样从git bash里运行也是一样。我自己再摸索摸索吧。 16 | 本篇如果可以存为.md格式，那么又解决了一个疑惑。 17 | -------------------------------------------------------------------------------- /homework/lesson2/第二次课程总结.md: -------------------------------------------------------------------------------- 1 | 第二次课程总结.md 2 | --- 3 | 4 | 这是我的主页：https://wangzhong2014.github.io/javascript/ 5 | 6 | 7 | 这是新生大学徐老师编程课的第二次作业。老师在上课的时候，讲了一个小明的例子，通过推到，把一个显示生活中的具体的小明，变成了编程世界中的具有代码属性的对象小明。 8 | 9 | 大学时， 我认识的一个刚学编程的同学说，编程就是创造，通过数据来创造自己脑子里面的东西。 10 | 现在有些感触。 11 | 12 | 本文主要分2部分： 13 | 1. 14 | 15 | -------------------------------------------------------------------------------- /homework/lesson3/CHENCHEN.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/CHENCHEN.PNG -------------------------------------------------------------------------------- /homework/lesson3/GaoXianfeng.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/GaoXianfeng.jpeg -------------------------------------------------------------------------------- /homework/lesson3/GaoXianfeng.md: -------------------------------------------------------------------------------- 1 | 浏览器与 Web 服务器交互 2 | 3 | 附：![浏览器和服务器交互图](https://github.com/ruoshuigao/getting-started-with-javascript/blob/lesson3/homework/lesson3/GaoXianfeng.jpeg) 4 | -------------------------------------------------------------------------------- /homework/lesson3/Jaychen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/Jaychen.png -------------------------------------------------------------------------------- /homework/lesson3/LiaoYuemin.md: -------------------------------------------------------------------------------- 1 | ## Homework of Lesson 3 2 | 作业又落后了，我一定要加油赶上！！！ 3 | 加班完急急忙忙回家听直播，有点蒙。 4 | 看到老师画的流程图，发现自己早晨出门时画的流程图还是有不足的地方。 5 | 要是直接改，又体现不出我的理解程度了，所以还是直接把早晨画的图贴上。 6 | 还有很多好像懂了又好像没动的地方，我在慢慢摸索提问的方式和技巧。 7 | 虽然还深处混沌，但是莫名还是会有一种一定可以学好的信心。 8 | 一个瞎了很多年的人，现在开始有点光感，这是这半个月这门课给我带来的改变。 9 | 谢谢老师和同学们的陪伴。 10 | 附：![浏览器和服务器交互图](https://github.com/Chaoshengluchi/getting-started-with-javascript/blob/master/homework/lesson3/LiaoYuemin.png) -------------------------------------------------------------------------------- /homework/lesson3/LiaoYuemin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/LiaoYuemin.png -------------------------------------------------------------------------------- /homework/lesson3/LiuShengsi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/LiuShengsi.png -------------------------------------------------------------------------------- /homework/lesson3/Risexie.md: -------------------------------------------------------------------------------- 1 | 第三节课总结 2 | === 3 | ### 浏览器和服务器的交互原理 4 | 在浏览器当中只要我们输入一个网址（URL)，浏览器就会神奇地给我们打开一个网页。翻墙之后，更是可以浏览到全世界的信息，那么这到底是如何实现的呢？ 5 | 6 | 简单来说，就是当我们在浏览器输入网址的时候，我们会通过http协议，给服务器发起一次相关URL内容的请求。当服务器接收了我们的请求，解析相关内容，然后再返回信息到我们的浏览器上面。 7 | 从这里可以看出，其实我们打开网页之后的内容是在我们请求过后，服务器“一次性”给我们提供的。这些内容可能是第三方库的代码、html、css等，在浏览器给我们缓存了之后，再呈现出来。所以其实我们并不是一直和服务器相连接的，在返回了相关请求内容之后，我们与服务器的连接就会中断。 8 |  9 | ### 数据那些事 10 | 数据有非常多种的类型，每一种类型其实都有自己的作用，而他们的传递效率也是各不相同。 11 | 当我们我们在调用一个数组数据的时候，其实电脑还同时调用了这个数组相关的长度、项数等信息。所以如果胡乱地使用数据类型的话，我们就会浪费计算机的内存和计算效率。我想别人经常提到的“优化”，其实就是更高效地实用不同的数据类型，来实现同样的需求。 12 |  13 | ### 命名的力量 14 | 我们所编写的代码除了给计算机运行之外，还可能经过很多程序员的审阅，优秀的代码不但运行高效，还可以给别的程序员带来启发，与收获。所以在编码的时候保持代码的易读性，对于成为一名优秀的程序员来说是必不可少的。而命名数据所使用名字适否恰当，直接代表了这份代码的易读与否。 15 | 命名的要点是： 16 | >要what不是how 17 | 18 | 例如我们在输入某个用户的的数据的时候，用的应该是`'personIMF'`,而不是`'input'`。 19 | -------------------------------------------------------------------------------- /homework/lesson3/SunBo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/SunBo.png -------------------------------------------------------------------------------- /homework/lesson3/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/Thumbs.db -------------------------------------------------------------------------------- /homework/lesson3/WANGXuanding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/WANGXuanding.png -------------------------------------------------------------------------------- /homework/lesson3/WangChangQing.md: -------------------------------------------------------------------------------- 1 | # Lesson 03 课程总结 2 | 这次课高阳老师主要介绍了数据交互的流程，以及数据类型的价值、变量命名的正确方法，和JS代码中非常重要的几条语法——if,else，for循环，switch等等。 3 | 4 | 收获很多！ 5 | 6 | 数据类型的价值我之前思考过，但是“不同类型的数据处理效率有所不同”这一点没有想到。仔细想想确实是如此。 7 | 8 | 变量命名这一点，可以让我们养成一个良好的习惯，有利于协同配合。 9 | 10 | 感觉高阳老师所讲的这几条JS语法还是比较好懂的。在讲解语法的过程中，高阳老师顺便还演示了Visual Studio Code的用法。我现在就在用Visual Studio来写总结，还是很好用的！ 11 | 12 | 数据交互这一块似乎也不是特别难懂，但是对于细节我还不是特别清楚。需要进一步的学习和摸索。 13 | 14 | **交互图：** 15 | 16 | ![mark](http://ou7elf9tx.bkt.clouddn.com/blog/170820/iBl7J3j5cj.jpg?imageslim) -------------------------------------------------------------------------------- /homework/lesson3/WangChangQing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/WangChangQing.png -------------------------------------------------------------------------------- /homework/lesson3/WuGaoxing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/WuGaoxing.png -------------------------------------------------------------------------------- /homework/lesson3/anjiancai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/anjiancai.png -------------------------------------------------------------------------------- /homework/lesson3/baoguoqiang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/baoguoqiang.png -------------------------------------------------------------------------------- /homework/lesson3/caijinpeng.md: -------------------------------------------------------------------------------- 1 | ##命名技巧 2 | 3 | 变量的命名方式最好能让人明白这个变量是什么意思，不能只顾自己爽，记得我14年刚学HTML时候，标签，类的命名经常是background1,background2……background110。我这还算好的，同学起码知道我这是背景，有的同学直接就是a1,a2……a110，现在还能想起当时接他工作的同学的表情。
4 | 5 | 我现在的方法是尽可能用单词，实在不会的用个差不多的单词，然后在注释里给写一下这里是什么意思。
6 | 7 | 8 | 比如： var car = 1;
9 | 10 | 这一段代码不太容易一眼就让人看明白这是什么意思， car表示车的数量，指所有的车 car？
11 | 12 | 于是改成：
13 | var redCar = 1;
14 | var blueCar = 2;
15 | 16 | 很明显嘛，一看就明白，红色的车有1台。
17 | 18 | #####个人总结： 19 | 20 | 编程语言虽然是给机器看的，但是因为要和别人合作，也是给人看的，所以还是要写的规范一点，哪怕真的只是自己完成一个项目，写的规范一些，以后查看时候也方便查阅啊。
21 | 22 | 23 | 第二点是，我觉得英语真的很重要，这几天用GitHub，又背了几个单词，不用不知道，一用吓一跳，有时间就多背几个词吧。 24 | 25 | -------------------------------------------------------------------------------- /homework/lesson3/caijinpeng.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/caijinpeng.png -------------------------------------------------------------------------------- /homework/lesson3/caozhen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/caozhen.png -------------------------------------------------------------------------------- /homework/lesson3/chaigaoping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/chaigaoping.png -------------------------------------------------------------------------------- /homework/lesson3/chengjun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/chengjun.png -------------------------------------------------------------------------------- /homework/lesson3/chenrushan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/chenrushan.png -------------------------------------------------------------------------------- /homework/lesson3/chenyanxing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/chenyanxing.png -------------------------------------------------------------------------------- /homework/lesson3/chenziwen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/chenziwen.png -------------------------------------------------------------------------------- /homework/lesson3/cuimiao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/cuimiao.png -------------------------------------------------------------------------------- /homework/lesson3/cuiyuwei.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/cuiyuwei.jpg -------------------------------------------------------------------------------- /homework/lesson3/dangfeipeng.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/dangfeipeng.png -------------------------------------------------------------------------------- /homework/lesson3/dengxy0907.md: -------------------------------------------------------------------------------- 1 | 浏览器与服务器交互 2 | =============== 3 | ![](https://ws4.sinaimg.cn/large/006tKfTcly1fiqhrzblr0j31kw23v4qq.jpg) 4 | 5 | ### 题外话 6 | > 在此之前确实没有想过打开网页也有这么多步骤，第一次看到类似的流程是在搭建shadwosocks的时候。直到现在仍然是照葫芦画瓢，关于各种协议看的也不是太明白。 7 | 8 | 9 | > 因为一些原因自己的生活发生了意外，课程也耽误了不少，甚至拉下的课程让我觉得畏惧了，不管了，今天开始推掉所有的事情。 -------------------------------------------------------------------------------- /homework/lesson3/diaozhicong.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/diaozhicong.jpg -------------------------------------------------------------------------------- /homework/lesson3/fangqingyang.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/fangqingyang.PNG -------------------------------------------------------------------------------- /homework/lesson3/fanliao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/fanliao.png -------------------------------------------------------------------------------- /homework/lesson3/fanqing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/fanqing.png -------------------------------------------------------------------------------- /homework/lesson3/fengkai.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/fengkai.jpeg -------------------------------------------------------------------------------- /homework/lesson3/guowei.md: -------------------------------------------------------------------------------- 1 | # 小白JS入门不放弃 lesson3 2 | 3 | *Focus Question* 当我们打开浏览器输入url地址后，到底发生了？ 4 | 5 | ### 网页数据交互 6 | 7 | 根据老师上课内容，网页数据交互，简单的讲，是浏览器与服务器的数据交互。这种数据交互是通过http协议交互的。 8 | 9 | 我理解的整个交互过程分为4步骤： 10 | 11 | 1. 用户在浏览器中输入url地址，浏览器发送一个HTTP请求到服务器。 12 | 2. Web服务器解析请求，回传一个HTML文件到客户端。 13 | 3. 浏览器解析回传的HTML文件，再次向服务器发送HTTP请求。 14 | 4. 服务器传回CSS和JavaScript文件，浏览器解析并执行代码，显示网页。 15 | 16 | *** 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /homework/lesson3/hanmeng.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/hanmeng.jpg -------------------------------------------------------------------------------- /homework/lesson3/hanwei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/hanwei.png -------------------------------------------------------------------------------- /homework/lesson3/haohu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/haohu.png -------------------------------------------------------------------------------- /homework/lesson3/hewei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/hewei.png -------------------------------------------------------------------------------- /homework/lesson3/hitchhacker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/hitchhacker.png -------------------------------------------------------------------------------- /homework/lesson3/huangBiLing.md: -------------------------------------------------------------------------------- 1 | ## 第三节作业 2 | 补交 3 | 4 | 这是补得非常迟的作业... 5 | 6 | 7 | 第一个图是照着老师的图改的。 8 | ![](https://raw.githubusercontent.com/wiki/ifoundu/getting-started-with-javascript/huangBiLing1.png) 9 | 10 | 第二个图是原来自己做的... 11 | ![](https://raw.githubusercontent.com/wiki/ifoundu/getting-started-with-javascript/huangBiling2.png) 12 | 13 | 第三个图就是参考的童鞋P的老师的图了。 14 | ![](https://github.com/xugy0926/getting-started-with-javascript/blob/master/homework/lesson3/chenyanxing.png) 15 | 16 | 17 | 说实话，还是不明白时序图跟流程图有什么区别...我还是先写"流程图"。 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /homework/lesson3/huangqi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/huangqi.png -------------------------------------------------------------------------------- /homework/lesson3/jianglin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/jianglin.jpg -------------------------------------------------------------------------------- /homework/lesson3/jianglin.md: -------------------------------------------------------------------------------- 1 | ### 姜琳第三次课总结 2 | 3 | #### 今天学到了什么 4 | 5 | 关于语法的部分，因为和C++的都是通用的，唤起了将近十年前的记忆…… 6 | 7 | 关于命名的部分是以前没想过的。以前只在考试的时候应用过i,j,k，当然是为了简便，而且没有大型的程序，学完之后想来，命名复杂，带来的是后续的各种方便，非常的值得。就像项目管理的计划做的细致一些，对后面的工作非常有意义。 8 | 9 | 关于前端后端的部分，老师的介绍简明扼要。话说之前差点想报新大的全栈营，是因为时间和没Mac电脑才放弃了。不过看老师回复其他同学说做管理很适合从JS入手学习编程，又很庆幸啊。跟上入门班，争取进阶班！ 10 | 11 | 12 | 13 | #### 笔记 14 | 15 | 提问途径：先思考、再google、再去新大APP找、去项目找、去微信群 16 | 17 | json格式：交互对象，JS里常用的交换数据的格式 18 | 19 | 命名的力量：除了在赋值循环变量以外，不要再用i、j、k，也不要用简单的start、end。 20 | 21 | 驼峰命名法：第一个单词首字母小写，后面单词首字母大写。 22 | 23 | 要what不要how：针对命名，说what更有效，比如不用 inputID而用nameID。要问两个问题：完整代表了变量的含义吗？以问题为导向了吗？ 24 | 25 | w3c看到JS Break之前的基础内容。 26 | 27 | 后端是处理数据，前端是提取数据，刷新页面，将数据更好的呈现。 -------------------------------------------------------------------------------- /homework/lesson3/langjianjun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/langjianjun.png -------------------------------------------------------------------------------- /homework/lesson3/leizhen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/leizhen.jpg -------------------------------------------------------------------------------- /homework/lesson3/leizhen.md: -------------------------------------------------------------------------------- 1 | ## 第三次作业 2 | 3 | 题外话： 4 | 我一直很奇怪老师怎么很少教代码，原来真的不在教代码，而是在教学编程的思想，在给我们设计学js的架构。我tm还懵了几节课，路和方向都给我们指明了，要真学不好，就真的不是智商的问题了。 5 | 6 | lesson3的总结： 7 | 8 | 重点：理解浏览器和服务器之间的交互图。 9 | 以前觉得这个东西一点都不重要，现在老师说要画图，绝对很重要。对于前端的理解很重要，但我还是不知道这个现在理解了有什么用（可能以后知道把）。 10 | 11 | nodejs是js的运行环境，软件架构就好似设计图： 12 | 知道了软件架构是什么了之后，nodejs是运行环境就不难理解了，它能提供服务，又怎么会是架构呢？ 13 | 14 | 数据类型的价值：不同的数据类型决定了代码执行的效率。 15 | 和上一次作业总结的一样，果然是为了高效。 16 | 17 | 定义了后还要使用，不然没有价值： 18 | 在terminal中运行name_style.js，很奇怪没有一点输出，进入js里查看代码后才发现全是定义，难怪没有输出。 19 | 20 | 命明用what，而不是how： 21 | 没有上老师的可之前还真是随意命名的，只要自己看的懂就行了，但时间长了之后，xd连自己都不知道这个文件里面是什么东西。总结完后，马上对电脑的文件重新命名一次。这次可光是学会命名感觉就赚大发了。自己学js可能这方面还真不会察觉。 22 | -------------------------------------------------------------------------------- /homework/lesson3/lianghf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/lianghf.png -------------------------------------------------------------------------------- /homework/lesson3/lichen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/lichen.png -------------------------------------------------------------------------------- /homework/lesson3/linxiyao_jiaofutu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/linxiyao_jiaofutu.png -------------------------------------------------------------------------------- /homework/lesson3/lipeng.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/lipeng.jpg -------------------------------------------------------------------------------- /homework/lesson3/liujuanjuan1984.md: -------------------------------------------------------------------------------- 1 | # JS编程入门Lesson3作业 2 | 3 | by刘娟娟2017-08-28 4 | 5 | ## 浏览器与服务器的交互图 6 | 7 | 8 | ![浏览器与网页服务器交互图](https://user-images.githubusercontent.com/31027645/29758481-79e7e21a-8be6-11e7-86bc-2fed0d2c3495.png) 9 | 10 | 非常粗糙的图，直接用excel标记的。我确实想节省时间，赶上进度。 11 | 第三节课，印象中依然是在讲变量命令规范。这带来的易读性很重要，利己利人。 12 | 13 | 14 | 一个可以分享的小技巧： 15 | 直接在你自己github的项目issue中粘贴图片就能获得地址。 -------------------------------------------------------------------------------- /homework/lesson3/liujun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/liujun.png -------------------------------------------------------------------------------- /homework/lesson3/liuliyuan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/liuliyuan.jpg -------------------------------------------------------------------------------- /homework/lesson3/liuqing-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/liuqing-3.jpg -------------------------------------------------------------------------------- /homework/lesson3/liuruyong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/liuruyong.png -------------------------------------------------------------------------------- /homework/lesson3/liushengxin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/liushengxin.png -------------------------------------------------------------------------------- /homework/lesson3/liuxiaohaohao.md: -------------------------------------------------------------------------------- 1 | # 流程图是一个很好的表现形式 2 | >“既然学习了技术，就要尝试用技术的表现手法来表达我们的意思。同样，流程图可以运用在各行各业，可以很清楚的表达交互的过程。” 3 | 关于流程图我的理解是：事无巨细地把事情操作的每一个步骤设计出来，同时在设计的过程中考虑到每个步骤会遇到哪些问题，并给出相应的解决方案。 4 | 在设计过程中也要注意到无重复，无遗漏。流程图的设计过程，就是帮助自己梳理事情运行的逻辑，帮助进行下一步执行的设计。 5 | 6 | #nodejs是一个基于Chrome V8引擎的Javascript运行时。 7 | 运行时是一种面向对象编程语言的运行环境。nodejs就是js的运行环境。 8 | 9 | #数据类型的价值 10 | 不同的数据类型决定了代码的执行效率。效率包括：存储效率，计算效率，传递效率。 11 | 12 | #定义了就要使用 13 | 定义了变量，一定要使用。数据类型很重要，对于不同类型的使用方法也很重要。函数很重要。 14 | 15 | #命名的力量 16 | 大多数人在命名这件事上都是被误导的。你写得代码很6，运行也没有问题，但是别人看不懂啊！这就麻烦了。这也是高手和普通程序猿的区别之一吧。 17 | 原则：1.你的名字一定要包涵更多的信息，不能让人一看内心产生了很多意思，去猜测你的意图到底是哪个。 18 | 2.要what不是要how，就是说你不能只是描述动作，你要展现出内容。比如，“打架”就是一个动作，而“打小明”就是动作之上的内容，“打架”就不如“打小明”好。 19 | 好名字的判断依据：1.完整代表变量的含义了吗？（更多的信息） 20 | 2.以问题为导向了吗？（反映问题而非解决方案） 21 | 22 | #需求 23 | 要思考为什么老师会想到这个需求？要自己给自己找需求。而需求需要建立在你的思考，逻辑上。 -------------------------------------------------------------------------------- /homework/lesson3/liuxiaohaohao1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/liuxiaohaohao1.png -------------------------------------------------------------------------------- /homework/lesson3/liuzhengchun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/liuzhengchun.png -------------------------------------------------------------------------------- /homework/lesson3/liuzhengchun_modify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/liuzhengchun_modify.png -------------------------------------------------------------------------------- /homework/lesson3/lixiang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/lixiang.png -------------------------------------------------------------------------------- /homework/lesson3/luoruijun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/luoruijun.png -------------------------------------------------------------------------------- /homework/lesson3/panyong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/panyong.png -------------------------------------------------------------------------------- /homework/lesson3/qiujingyu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/qiujingyu.png -------------------------------------------------------------------------------- /homework/lesson3/shaozhen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/shaozhen.png -------------------------------------------------------------------------------- /homework/lesson3/sophieQi.md: -------------------------------------------------------------------------------- 1 | ## 浏览器和服务器之间的交互图 2 | ![交互图.jpg.png](https://i.loli.net/2017/08/22/599c54149eb28.png) 3 | 4 | ## 老师给出的浏览器和服务器的顺序图 5 | ![image.png](https://i.loli.net/2017/08/22/599c545678101.png) 6 | 7 | #### 变量名称 8 | > 1. 完整代表了变量的含义吗？ -> 推到出更多信息 9 | > 2. 以问题为导向了吗？ -> 反映了问题而非解决方案 10 | 11 | 从定义的变量名称，可以看出是什么类型的变量；不能是统称的名字，可以具体到事物本身。 12 | 定义一个变量，赋值給他。赋值了就要使用，才有意义。 13 | 变量名称要符合是how，不是what。 14 | *举例：* 15 | ```node 16 | var end = 100; // bad。 end什么？不明白 17 | var endCount = 100; // good。可以推导出是结束数字，number类型。 18 | 19 | // 表示一个输入的雇员信息(inputData不好，只能表示是输入的数据。输入的什么数据？不清楚。只知道how，不知道what。) 20 | var employeeData = { // good。 这是个雇员的数据(很明确知道what是什么)，很清晰。 21 | name: 'xiaoming', 22 | age: 18, 23 | sex: 'man' 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /homework/lesson3/taobao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/taobao.png -------------------------------------------------------------------------------- /homework/lesson3/wangfanhao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wangfanhao.png -------------------------------------------------------------------------------- /homework/lesson3/wangshasha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wangshasha.jpg -------------------------------------------------------------------------------- /homework/lesson3/wangwei.md: -------------------------------------------------------------------------------- 1 | ## 1. 阅读study/lesson3的两份代码。 2 | >已阅读 3 | 4 | 5 | ## 2. 画出浏览器和服务器之间的交互图 6 | > ![交互图](http://a3.qpic.cn/psb?/V10yXgCs06YSTK/5cLsn2N2hgsjK0DMHrMyKarLy6kXZ3mKcp1oB.XFT60!/b/dG0BAAAAAAAA&bo=gALrAwAAAAARCFU!&rf=viewer_4) -------------------------------------------------------------------------------- /homework/lesson3/wangying.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wangying.jpg -------------------------------------------------------------------------------- /homework/lesson3/wangyunfei_zuoyetu01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wangyunfei_zuoyetu01.png -------------------------------------------------------------------------------- /homework/lesson3/wangyunfei_zuoyetu02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wangyunfei_zuoyetu02.png -------------------------------------------------------------------------------- /homework/lesson3/wangyunfei_zuoyetu03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wangyunfei_zuoyetu03.png -------------------------------------------------------------------------------- /homework/lesson3/wangzhongbin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wangzhongbin.jpg -------------------------------------------------------------------------------- /homework/lesson3/wenliuxin.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wenliuxin.JPG -------------------------------------------------------------------------------- /homework/lesson3/wenyunxin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wenyunxin.png -------------------------------------------------------------------------------- /homework/lesson3/wufan.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # 阅读study中lesson3的两个代码文件 4 | 5 | 一 命名要清楚，要让人读懂，更友好一些。好的命名判断标准： 6 | 7 | 1得出是什么数据类型或者更多内容的信息； 8 | 9 | 2得出一个具体的信息，可以精准确定位置。 10 | 11 | 二 表达式与表达式语句、赋值语句的区别： 12 | 13 | * age = 18 这是表达式 14 | * var age = 18 ；这是表达式语句 15 | 16 | ​ var age； 17 | 18 | * age = 18；这是赋值语句 19 | * for循环语句的初始值语句，条件语句，计数器变量更新语句。 20 | * switch语句适用于有限个样本空间元素的使用，其余不应用，特别注意default的使用 21 | * while和do while的区别就是符合条件执行，和不管符合条件与否先执行，然后符合条件再执行。 22 | 23 | # 画出浏览器和服务器之间的交互图 24 | 25 | ![](https://ws3.sinaimg.cn/large/006tNc79gy1filgi5z489j30zk0qojti.jpg) 26 | -------------------------------------------------------------------------------- /homework/lesson3/wufan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wufan.png -------------------------------------------------------------------------------- /homework/lesson3/wukuipin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/wukuipin.png -------------------------------------------------------------------------------- /homework/lesson3/xiaochaoge.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/xiaochaoge.jpeg -------------------------------------------------------------------------------- /homework/lesson3/xugaoyang.md: -------------------------------------------------------------------------------- 1 | 首先想告诉同学们，由于作业量很大。而且前面给大家留的是作文(总结)形式的作业，我要一篇一篇去阅读，批改速度会很慢。我一定会读，发现问题时一定给出建议。倘若有遗漏，merge了你的作业但没有批复，请你主动提醒我一下。 2 | 3 | 所有的作业都不怕晚，只要在课程结束时间内发pr我就收。 4 | 5 | 重点是下面：） 6 | 7 | 【作业内容】 8 | 1. 阅读study/lesson3的两份代码。 9 | 2. 画出浏览器和服务器之间的交互图（不会？什么是交互图？完全没思路？那你肯定没上课或没看回放：）） 10 | 3. （备选）如果你还想写课程总结？请继续，我很喜欢看你们的总结：），有总结必回。 11 | 12 | 【提交方式】 13 | 1. 请向getting-started-with-javascript项目发起pull request。 14 | 15 | https://github.com/xugy0926/getting-started-with-javascript 16 | 17 | 2. 交互图格式：你名字命名的png图片。（如果还想继续写总结给我看？老规矩，你名字命名的md文件，和png图片一起发pr） 18 | 3. 提交homework/lesson3目录下。 19 | -------------------------------------------------------------------------------- /homework/lesson3/yammy.md: -------------------------------------------------------------------------------- 1 | ## name style 2 | 3 | 变量的命名方式最好能完整反映出变量的含义（What），即让读代码的人一眼就明白what is it. 4 | 5 | 比如： `var cart = 1;` 6 | 7 | 这一段代码很难一眼就让人看明白这是什么意思，到底是指购物车 cart 数量，还是指某台购物车 cart ？ 8 | 9 | 如果改成这样就一目了然了：`var cart_total_numbers = 1;`，很明显嘛，一看就明白，购物车数量总共是1个呗。 10 | 11 | --- 12 | 13 | **小结：** 14 | 15 | 像 JS 这类解释性的语言，是人类友好型语言，虽然是代码，但人类读起来就像读英文一样，但这英语每个人写出来的却几乎完全不同，有的人写的清晰明了，有的人写的乱七八糟。 16 | 17 | 如果是一个人独自写代码还好，一旦需要协作，就会有人来读你的代码，你自己有时也会时不时的需要维护代码，写的不好的代码，尤其是变量定义的不好的代码，就会很难看懂，就会成为相互协作的阻碍。 18 | 19 | ## 浏览器和服务器之间的交互图 20 | 21 | ![](http://okr0iw9h2.bkt.clouddn.com/2017-08-16-IMG_0088.JPG) 22 | 23 | 抱歉，图片可能不太清楚。 24 | 25 | --- 26 | 27 | ps: 徐老师，我偷看了一眼 lesson4 的代码，其中 study/lesson4/type_array_sample.js 第23行代码：`myLikeColorsList.push();`这里调用的 push 方法貌似跟注释不太匹配呢，嘻嘻。 -------------------------------------------------------------------------------- /homework/lesson3/yammy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/yammy.png -------------------------------------------------------------------------------- /homework/lesson3/yangchunguang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/yangchunguang.png -------------------------------------------------------------------------------- /homework/lesson3/yangtieming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/yangtieming.png -------------------------------------------------------------------------------- /homework/lesson3/yangxuewu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/yangxuewu.png -------------------------------------------------------------------------------- /homework/lesson3/yanqingmu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/yanqingmu.png -------------------------------------------------------------------------------- /homework/lesson3/yongfei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/yongfei.png -------------------------------------------------------------------------------- /homework/lesson3/youshilei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/youshilei.png -------------------------------------------------------------------------------- /homework/lesson3/zhanggaoyang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/zhanggaoyang.png -------------------------------------------------------------------------------- /homework/lesson3/zhanglina.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/zhanglina.jpeg -------------------------------------------------------------------------------- /homework/lesson3/zhangqian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/zhangqian.png -------------------------------------------------------------------------------- /homework/lesson3/zhaokaili.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/zhaokaili.jpg -------------------------------------------------------------------------------- /homework/lesson3/zhaoxiaoxin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/zhaoxiaoxin.png -------------------------------------------------------------------------------- /homework/lesson3/zhaoyinan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/zhaoyinan.png -------------------------------------------------------------------------------- /homework/lesson3/zhouqizhou.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/zhouqizhou.png -------------------------------------------------------------------------------- /homework/lesson3/zhuningning.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/zhuningning.jpg -------------------------------------------------------------------------------- /homework/lesson3/zhuyongjin-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/zhuyongjin-3.jpg -------------------------------------------------------------------------------- /homework/lesson3/交互图.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/交互图.png -------------------------------------------------------------------------------- /homework/lesson3/微信图片_20170822192354.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/微信图片_20170822192354.jpg -------------------------------------------------------------------------------- /homework/lesson3/浏览器与服务器交互图_cc.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/浏览器与服务器交互图_cc.PNG -------------------------------------------------------------------------------- /homework/lesson3/第三次作业 交互图.md: -------------------------------------------------------------------------------- 1 | ##第三次作业 交互图 2 | 3 | ###上课笔记： 4 | 5 | 1、nodejs是JS的运行时 6 | 7 | 2、变量：定义变量，给变量赋值 8 | 9 | 3、命名： 10 | >名字包含更多的信息 11 | 12 | >要what不是how：var inputData & **var employeeData** 13 | 14 | 4、APP与服务器/浏览器与服务器之间的交互 15 | >获取HTML文件 16 | >解析HTML文件 17 | >获取JS/CSS 18 | >更新页面/执行JS代码 -------------------------------------------------------------------------------- /homework/lesson3/网页数据交互.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/网页数据交互.png -------------------------------------------------------------------------------- /homework/lesson3/谢玉辉.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson3/谢玉辉.jpg -------------------------------------------------------------------------------- /homework/lesson3/谢玉辉.md.md: -------------------------------------------------------------------------------- 1 |  2 | 3 | 看完了所有视频，然后回来这次作业，现在有了整体的概念。技术上的问题相信自己会很快熟练。 -------------------------------------------------------------------------------- /homework/lesson4/Jaykey.md: -------------------------------------------------------------------------------- 1 | ### 基础-第四课 2 | 3 | 记住什么？ 4 | 5 | #### 函数的构造和调用 6 | 7 | > 原则：没有调用的参数和函数，都是流氓参数、流氓函数。 8 | 9 | #### 从实际应用到代码 10 | 11 | 第一步是拆分过程，讲一个“大事件”拆分成若干的小事情，只找其中必要的部分来做。 12 | 13 | 第二步，完成各个小的单元，写出各个小部分的代码。 14 | 15 | 第三步，汇总，形成工作流，排序，调用对应函数。 16 | 17 | PS：做好每个小单元的设计和封装，才能在调用的时候更加方便和高效。好的函数是能够多次调用的。 18 | 19 | #### 使用VUE来构建动态数据 20 | 21 | ------ 22 | 23 | 小结：使用VUE的过程中要赋予对应的id值。 24 | 25 | 更新个人JS学习博客：https://github.com/JayGJianGuo/js-study-record 26 | -------------------------------------------------------------------------------- /homework/lesson4/WuGaoxing.md: -------------------------------------------------------------------------------- 1 | # 没有作业就传个函数相关笔记 2 | PS：没有作业 重点是复习 3 | 回顾： 4 | 函数/function 5 | 前端- 让数据动起来 6 | 对象、JSON对象、JSON格式 7 | 王云飞的勇气 还有幼儿园班 8 | JS中函数特别的简单 ，函数是JS的一切 9 | 定义函数 10 | function counter(count){ 11 | count = counter+1; 12 | retun count 13 | } 14 | 15 | 调用函数 16 | counter(1) 17 | 18 | 函数调用有： 顺序调用、嵌套调用 19 | 函数是一个处理的封装 、一个处理的单元 20 | 21 | 做菜函数 很是丰富 可熟练掌握： 22 | 23 | ## W3school中学到的函数 24 | 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 25 | 函数就是包裹在花括号中的代码块，前面使用了关键词function： 26 | 27 | function functionname() 28 | { 29 | 这里是要执行的代码 30 | } 31 | 32 | 在使用 return 语句时，函数会停止执行，并返回指定的值。 33 | 34 | 调用带参数的函数 35 | 在调用函数时，您可以向其传递值，这些值被称为参数。 36 | 这些参数可以在函数中使用。 37 | 您可以发送任意多的参数，由逗号 (,) 分隔： 38 | -------------------------------------------------------------------------------- /homework/lesson4/jianglin.md: -------------------------------------------------------------------------------- 1 | ### 姜琳第四次课总结 2 | 3 | #### 今天学到了什么 4 | 5 | 今天的重点是函数的定义和调用。要慢慢在应用中体会吧。老师说JS没有C++函数使用复杂，不过我都不是很记得了。 6 | 7 | 8 | 9 | #### 笔记 10 | 11 | iterm 终端编辑器 12 | 13 | 调用关键点： 14 | 15 | 1. 需要明确调用目标（对象） 16 | 2. 需要给予目标一些信息 17 | 3. 目标处理完会返回结果 18 | 19 | 函数是黑盒，不需要把每个函数内部搞清楚。函数是一个处理的封装，是一个处理的单元。函数名、参数、返回值：三要素。 20 | 21 | 新建一个文件要先保存。 22 | 23 | 多看issues 24 | 25 | Vue，可以学一点的第三方库。这段没太看懂，对html了解得太少了。 26 | 27 | visio什么的那个编辑器，最后一个图标里都是插件，可以搜索使用。 28 | 29 | JavaScript format 编辑器主题 30 | 31 | 主题： 32 | 33 | 回顾、函数、前端-让数据动起来、对象、JSON对象、JSON格式 -------------------------------------------------------------------------------- /homework/lesson5/JayChen.md: -------------------------------------------------------------------------------- 1 | ### 代码分析 2 | 3 | ```Javascript 4 | *1 function output(name){ 5 | *2 console.log(name); 6 | *3 } 7 | *4 8 | *5 var name = 'Hello, JS'; 9 | *6 output(name); 10 | ``` 11 | 12 | * 第一行的name是定义output函数时设定的参数 13 | 14 | * 第五行的name是要把 'Hello, JS'赋值给它的变量 15 | 16 | * 第六行的name是调用output函数时喂给它的参数，在这里就是第五行赋值后的name 17 | 18 | > 这三者在赋值后值相同，但是含义不同；第一行是在定义函数时设定的参数，是一个通用概念的参数，第五、六行的name分别是被赋值的变量和赋值后喂给函数的参数；他们可以使用同一个名称，或者第一、二行的name指代的参数名称与第五、六行的name赋值的变量名称完全不同，都是可以的。 -------------------------------------------------------------------------------- /homework/lesson5/LiuShengsi's homework of lesson5.md: -------------------------------------------------------------------------------- 1 | 2 | 代码第一行的name是所定义的output函数的形式参数，用来告诉计算机“我这个函数有一个参数，你可要记住了”。 3 | 4 | 第五行的name则是定义的一个名称是“name”的变量，并且这个变量被赋值为“Hello,JS”。 5 | 6 | 第六行的name是刚刚定义的“name”变量被当成是output函数要执行需要的实际参数传给了output函数。 7 | 8 | 定义函数时形参取的名字是否和后来传给函数的实际参数一样都没有关系，只要传给函数的实际参数是已经定义过的就行。 9 | 10 | -------------------------------------------------------------------------------- /homework/lesson5/WANG Xuanding.md: -------------------------------------------------------------------------------- 1 | # 图片上的代码，第1行、第5行、第6行的name变量都有什么差异？ 2 | 3 | ``` 4 | function output(a){ 5 | console.log(a); 6 | } 7 | 8 | var name='Hello,js'; 9 | output(name); 10 | ``` 11 | 12 | 为了区分name我直接将function中的name改成了a。第一行function中的name是一个形式参量，可以是任何形式的字符串。output(什么)，console.log（什么） 13 | 14 | 第5.6行的name,第5行，name先是起到一个object的作用，赋予name‘hello，js’的字符串形式，第6行，output中的name，我把它理解程未知数，output这个函数是含一个未知数的多项式，（）中的东西就是这个未知数，而这个未知数的赋值是在之前var的时候进行的，而多项式的定义是function。 15 | 16 | 因此，output（name）就成了求name='Hello,js'时，求值多项式（function值）的问题。 17 | -------------------------------------------------------------------------------- /homework/lesson5/WuGaoxing.md: -------------------------------------------------------------------------------- 1 | 1. function output(name){ 2 | 2. console.log(name); 3 | 3. } 4 | 4. 5 | 5. var name = 'Hello,JS'; 6 | 6. output(name); 7 | 8 | 9 | # 代码理解 10 | 11 | ### 代码整体理解: 12 | 13 | 1-3行是一个函数 函数名是output,参数是name 14 | 15 | 5行是定义一个name变量 类型是string 并赋值 'Hello,JS' 16 | 17 | 6行是调用函数output，并给函数传入了第5行定义的name 18 | 19 | ### 代码细分解释： 20 | 21 | 1-3 行的 两个 name 只是一个标识，标识调用此函数时传入的参数，在函数体内部哪个地方调用，或者怎么使用。可以理解成一个标识。两处 只要一样就行，这里完全可以改成 QQ 等类的 名字。 22 | 23 | 5行的 name 是定义了一个变量，并赋值，第六行是使用第5行的这个变量，这两处只要一样就行。 24 | 25 | -------------------------------------------------------------------------------- /homework/lesson5/anjiancai.md: -------------------------------------------------------------------------------- 1 | function output(name) { 2 | console.log(name); 3 | } 4 | 5 | var name = "Hello, JS"; 6 | output(name) 7 | 8 | 阐述程序执行过程： 9 | 运行上述代码时，读到1-3行的function,放在内存暂不执行； 10 | 往下运行至第5行，从右往左开始，把字符串“Hello, JS”赋值给新变量name,这是第5行中的name作为一个新变量出现； 11 | 运行至第6行，语句为output(name)函数，此句中的name为用第5行定义的新变量name； 12 | 然后再到内存中执行第1-3行定义的output()函数，第1行中的name为函数output的形式参数；而第6行调用函数中的name为实际参数，运行是将调用函数中的实际参数赋值给定义函数的形式参数，即第6行中的name赋值给第1行的name,最后运行函数体中的语句，直到函数体运行完毕，程序结束。 -------------------------------------------------------------------------------- /homework/lesson5/baoguoqiang.md: -------------------------------------------------------------------------------- 1 | # 懵懵懂懂的函数 2 | 3 | ## * 感悟 4 | 5 | 听了几节课的下来，讲解的全是关于函数的调用和处理手法，有些云里雾里的，有些概念暂时还未理解。看到好多同学都交了作业，自己不想落下，中间也有过想放弃的念头，觉得自己理解能力有些跟不上，问问题又不知道怎么问，看到同学们在群里都很积极活跃，也看到了云飞同学的学习热情，看到了老师分享的他的作业，一步一步分析的很是到位，觉得再不跟紧队伍就真的跟不上了，也给了我一个大大的鼓舞，虽然自己的理解还相差甚远，也阻挡不了交作业的欲望（哈哈） 6 | 7 | ## *作业 8 | 9 | >function output(name) { 10 | console.log(name); 11 | } 12 | 13 | >var name = 'Hello,JS'; 14 | 15 | >output(name); 16 | 17 | 关于上面几个"name"变量的差异： 18 | 1. function output(name)中的name是函数名下的一个参数变量； 19 | 2. console.log(name)中的name是函数内部中的一个局部变量；对于函数的内部调用有着至关重要的作用 20 | 3. var name 中的name是整个函数外部的全局变量； 21 | 4. 最后一个是调用函数所需的变量。 22 | 23 | ## *小结 24 | 25 | 以上的理解是自己早上刚好看书到那一小结，讲解了这个全局变量和局部变量，就联系到这儿了。 26 | 27 | 关于函数的异步处理方案，老师讲解的现实中的例子能理解了，就是套用函数的方式，就蒙圈了，看的那些代码环环相套的感觉，似懂非懂的。下来要多练习，多看回放，紧跟大队伍，争取不掉队。 -------------------------------------------------------------------------------- /homework/lesson5/caijinpeng.md: -------------------------------------------------------------------------------- 1 | # 第五课作业 2 | 3 | function output(name){ console.log(name); } 4 | 5 | var name = ‘hello,js’; output(name); 6 | 7 | 第一行的name是一个形式上的参数， 第五行的name是一个变量，这个变量的名字叫name， 第六行的name是实际的参数， 8 | 9 | 第二行的打印name，就是第一行传入第六行实际的参数name的值，值是第五行变量的hello js。 -------------------------------------------------------------------------------- /homework/lesson5/chenguoqiang.md: -------------------------------------------------------------------------------- 1 | # Lesson5作业Name的区别 2 | 3 | 函数的定义： 4 | 5 | > 说简单点就是“代码块”，具有可重复性。 6 | 7 | 函数的语法： 8 | 9 | > 函数就是包裹在花括号中的代码块，前面是了关键词：function。 10 | > 11 | > 当调用函数时，会执行函数内的代码。 12 | > 13 | > 提示：对大小敏感。关键词function必须小写，并且必须以与函数名称相同的大小写来调用函数。 14 | 15 | 调用带参数的函数： 16 | 17 | > 在调用函数时，您可以向其传递值，这些值被称为参数。 18 | > 19 | > 这些参数可以在函数中使用。 20 | > 21 | > 您可以发送任意多的参数，由逗号(,)分隔。myFunction(argument1,argument2) 22 | > 23 | > 当您声明函数时，请把参数作为变量来声明： 24 | 25 | ![IMG_8817](/Users/chenguoqiang/Downloads/IMG_8817.PNG) 26 | 27 | 通过上面的概念，我们清楚的知道了，图片第一行的“name”是参数，它也是一个变量，是output这个函数的参数，是用来表面函数逻辑关系的变量，不是实际的值，所以是可以更改的，即为形参。 28 | 29 | 第五行的name，是新定义的变量，跟上的函数变量没有任何关系，并给它赋值“hello，js’，更改赋值会影响最后的输出结果。 30 | 31 | 第六行的name，是相当于把第五行name的变量值传递给output函数，相对于第一行的name，这里的name是被赋值的参数，也被称为实参。第五行和第六行的“name”都是可以更改，但是必须保持一致。 -------------------------------------------------------------------------------- /homework/lesson5/cloudyview.md: -------------------------------------------------------------------------------- 1 | # 第五课作业 2 | 3 | ## 1. 阅读study/lesson5的sample代码，并执行观察结果。 4 | * ### type_array_sample.js 5 | 6 | 这个程序主要展示了数组类型数据的操作方式。 7 | 首先，如果console.log直接打印一个数组的话，会将“=”右侧的数据完整展示出来。 8 | 通过for循环，利用游标可以实现数组数据的遍历。这种方式可以直接抽取数组里面每一个元素来打印。 9 | 下面的几段语句实现了对数组的操作。push方法，在数组末尾加入新的元素；pop和shift分别可以将数组最前面和最后面的元素删除；利用indexof()可以查询到某一个元素的游标是多少。 10 | 11 | * ### type_boolean_sample.js/type_number_sample.js 12 | 13 | 布尔类型只有true和false两个值。这两个值可以利用toString()方法，可以转化为字符串类型。利用typeof()方法可以看出，转化后的是字符串类型。数字类型的数据也可以用这个方法来转化为字符串。 14 | 15 | 16 | 17 | ## 2. 图片上的代码，第1行、第5行、第6行的name变量都有什么差异？请分析差异提交你的结论。以你命名的md文件提交。 18 | -------------------------------------------------------------------------------- /homework/lesson5/donglili.md: -------------------------------------------------------------------------------- 1 | ## 代码分析 2 | 3 | 1. function output(name) { 4 | 2. console.log(name); 5 | 3. } 6 | 7 | 4. var name = 'Hello,JS'; 8 | 5. output(name);` 9 | 10 | 上面的代码，其中： 11 | 12 | 第1行的 name 是 output()这个 function 的参数定义值。是用来接收后面（第5行）的调用函数的值的。这个数可以是任意能使用的，只要他和第2行输出的那个console.log（）中的一致就可以。比如，可以使用a，b，c等等。 13 | 14 | 第4行的 name 是 一个独立的变量，就是个变量名，我们定义这个变量为"Hello,JS"。 15 | 第5行的 name 是 把第4行的变量 name 作为 output()这个函数的参数，送到第1行定义的函数内，运行函数。第4行及第5行的name也可以用其他代替，只要一致就可以。 16 | 17 | -------------------------------------------------------------------------------- /homework/lesson5/fangqingyang.md: -------------------------------------------------------------------------------- 1 | ### Lesson5 2 | 3 | #### 第一行name 4 | 5 | 可以是任意一段字符串，指明叫name是因为作者想用这个名字来说明：这段字符串是用来做name的，只是名字与第5行第六行相同，其实他们之间没什么关系。 6 | 7 | #### 第五行name 8 | 9 | 变量的标识名称，指向‘Hello, JS'这个字符串，是’Hello, JS'这个字符串的进一步抽象，方便调用，就像我们每个人有一个名字，那个名字的代表我们这个人。 10 | 11 | #### 第六行name 12 | 13 | 就是指'Hello, JS'这段字符串，将'Hello, JS'这个字符串作为参数（要求）传给output这个函数。 14 | 15 | #### 回调 16 | 17 | 平时都是字符串，数组，数值作为函数参数的，现在函数也作为参数。 18 | 19 | 异步是回调的一种 20 | 21 | 类似，老妈早上和儿子说晚上你来煮饭（调用函数），我去上班，儿子到了晚上开始做饭（根据参数晚上），老妈还在上班（同一时间，老妈在上班，儿子在煮饭，异步），老妈回家，儿子煮好饭。（得出结果） 22 | 23 | 老师说的一个情景，网页，先显示一个LOADING，在用户看着LOADING的同时，浏览器在和服务器做数据交互，各自做各自的，而不是让用户看着空白的页面，以为什么也没发生，等不下去，关了。 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /homework/lesson5/fanliao.md: -------------------------------------------------------------------------------- 1 | # 【作业内容】 2 | ## 图片上的代码，第1行、第5行、第6行的name变量都有什么差异？请分析差异提交你的结论。以你命名的md文件提交。 3 | 4 | ## 谈谈我对这几个‘name’的理解，还请老师看看我对课程的理解是否正确。 5 | 1. 第一行和第二行中的两个‘name’必须书写的完全一致，它是函数output的参数； 6 | 2. 第五行和第六行中的两个‘name’ 必须命名的完全一致，它是一个新的变量，而且在第五行这个变量已经赋值了‘hello,js’,然后调用函数Output，将这个值通过第六行的‘name’传给函数中的第二行，打印出来； 7 | 3. 所以说其实将第一、二行的'name'同时换成'a'，把第五、六行的'name'换成'b'应该对于这段代码的运行毫无影响的，之所以要全用'name'命名，只是考虑到在做大的项目中，这样的命名增强了代码的可读性，所以我们作为初学者也要学习这样的好习惯。 8 | 9 | -------------------------------------------------------------------------------- /homework/lesson5/fengkai.md: -------------------------------------------------------------------------------- 1 | function output(name){ 2 | console.log(name); 3 | } 4 | 5 | var name = 'Hello, JS'; 6 | output(name); 7 | 8 | 1.第一行的name是 output函数的参数，并且这个参数是个变量； 9 | 2.第五行的name是 声明一个变量叫name，并赋予了这个变量一个值； 10 | 3.第六行的name是 调用了output函数以及他的变量参数。 -------------------------------------------------------------------------------- /homework/lesson5/hanwei.md: -------------------------------------------------------------------------------- 1 | ## 第五节课作业 2 | 第1行的name表示函数用来接收参数的变量，这个变量和第二行的name是一个。相当于声明一个变量，但和一般的声明变量有不同，只有在调用函数的时候才会定义和赋值，用来接收传递过来的参数。而且它的作用范围只在一次调用的函数中，函数执行完成随即失效。 3 | 4 | 第5行的name则是在这段代码中声明定义并且赋值，在这段代码中它是一个明确的正在使用的变量；不同于第一行的变量只有在调用函数的时候才实际生命定义并使用。 5 | 6 | 第6行的name，实际上就是第5行的name。它的作用就是调用output函数，并将变量name传递给它。这个过程中，output会在内部生成另一个name来接受它。虽然两者的名字一样，但由于作用的范围并不相同，所以并不冲突。 7 | -------------------------------------------------------------------------------- /homework/lesson5/haohu.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | - 第1行的name是函数定义的一部分,是函数的形参; 4 | - 第5行name是自定义的变量名,用来在程序其他地方使用; 5 | - 第6行的name和第5行的name是一样的,是对变量使用. 6 | -------------------------------------------------------------------------------- /homework/lesson5/huangBiLing.md: -------------------------------------------------------------------------------- 1 | ## 我的第5课作业 2 | 3 | ### 第5次作业要求： 4 | 5 | 6 | #### 题目： 7 | 图片上的代码，第1行、第5行、第6行的name变量都有什么差异？请分析差异提交你的结论。以你命名的md文件提交。 8 | ![](https://ws3.sinaimg.cn/large/006tKfTcly1fmqq5c22x5j30ls09qabe.jpg) 9 | 10 | 11 | #### 答： 12 | 第1行name：是函数的形参变量；作用是在函数结构()的这个地方，作为实参/值/数据的提示，就是让读代码的人了解到这个函数想要调用的实参/值/数据是哪方面的，比如，是“名字”还是“动作”，等等。 13 | 14 | 第5行name：此处name是刚定义的实参，引用一个字符串类型的值'Hello,JS'。 15 | 16 | 第6行name：调用函数output，并导入/调用实参name = 'Hello,JS'。 17 | -------------------------------------------------------------------------------- /homework/lesson5/langjj.md: -------------------------------------------------------------------------------- 1 | 下面代码中，第1行、第4行、第5行的name变量都有什么差异？ 2 | 1. function output(name) { 3 | 2. console.log(name); 4 | 3. } 5 | 6 | 4. var name = 'Hello,JS'; 7 | 5. output(name); 8 | 9 | 在function定义中的name只是函数output的输入参数，可以是任意名字，只要保持第二行中使用的名字与第一行中一致即可。这是一个局部变量，不会影响到程序的其他部分。 10 | 11 | 第4行则定义了一个变量，这个变量的名字最好与编程者想要表达的意图相关，必要时用//加注释，以便理解。在给变量取名字时一定要避开JS中已有特定定义的名字，否则会出错。第5行则要求执行函数output，函数的输入值是第4行对变量进行的赋值。这里的变量是适用于整个程序的，因此具有了唯一性。 12 | 13 | -------------------------------------------------------------------------------- /homework/lesson5/lichen.md: -------------------------------------------------------------------------------- 1 | 1.重点观察了`kitchen_workflow_async.js` 2 | 通过拆解的方式学到了以下知识点： 3 | ![](https://ws2.sinaimg.cn/large/006tKfTcgy1fjbbbmqgzhj30t309dgnd.jpg) 4 | 5 | 2. 图片上的代码，第1行、第5行、第6行的name变量都有什么差异？请分析差异提交你的结论。 6 | ![](https://ws1.sinaimg.cn/large/006tKfTcgy1fjbd9avhhwj30ls09qdh6.jpg) 7 | 8 | 这个程序的输出： 9 | `Hello,JS` 10 | 11 | 第1行的`name`是函数的形参 12 | 第5行的`name`是定义的变量 13 | 第6行的`name`是调用函数的实参 14 | 15 | 统一写成`name`是为了便于阅读，和尽可能精简对变量的命名 16 | 17 | 附注： 18 | 形式参数：定义函数时函数名后括号中的变量名 19 | 实际参数：调用函数时函数名后括号中的表达式 20 | 21 | 小小观察： 22 | 程序里多定义一个变量，但不调用它，看看结果 23 | ``` 24 | function output(name) { 25 | console.log(name); 26 | } 27 | var name = 'Hello,JS'; 28 | var color = 'blue'; 29 | output(name); 30 | ``` 31 | 输出为： 32 | `Hello,JS` 33 | 34 | 这说明一个变量被定义了但未被使用，这是一种资源的浪费，所以程序需要思考，需要设计，而不是想到哪就写到哪。当然作为小白的我们，趟一趟这些坑也是学习路上必不可少的。 -------------------------------------------------------------------------------- /homework/lesson5/limu.md: -------------------------------------------------------------------------------- 1 | 第一行是声明并定义了一个新的函数，大括号里是函数的内容 2 | 第五行是生命并定义了一个变量，并赋予这个变量的值为‘hello，js’ 3 | 第六行是调用了之前定义的新函数output 4 | 5 | 由于最近大学开学，一直在准备开学和军训的事情，所以耽误了好久的课程，从山东济南来到广东这边，感觉变化很大，刚来有些水土不服，拉了两天肚子，可算今天没有新生活动参加了，能来敲敲代码了，敲代码让我又有可高三时那股闷着头做导数题的感觉，一转眼几个小时就过去了，很爽。也很开心，自己进入了软件工程卓越计划班，加上暑假跟着老师学了一些编程，开学上课应该会稍微轻松些吧。 -------------------------------------------------------------------------------- /homework/lesson5/lingxiao.md: -------------------------------------------------------------------------------- 1 | # JavaScript 课程第5次作业 2 | 3 | 1. 【作业内容】 4 | 1. 阅读study/lesson5的sample代码，并执行观察结果。 5 | 2. 图片上的代码，第1行、第5行、第6行的name变量都有什么差异？请分析差异提交你的结论。以你命名的md文件提交。 6 | 2. 【解答】 7 | 8 | | 代码 | 分析 | 9 | | ---------------------------------------- | ---------------------------------------- | 10 | | ![代码图片](https://github.com/LydiaLing/MyPostImage/blob/master/Js_Homework/Lesson5_pic1.png?raw=true) | 第1行是函数的自变量，是一个形参，
可以选择任何字符替换name,
而且此处的形参需要和output函数体内部的参数保持一致；
第5行是定义后的变量，代表“Hello.js”；
第6行的name就是第五行的name，是实参，实际定义的参数。 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /homework/lesson5/linxiyao-homework-lesson5.md: -------------------------------------------------------------------------------- 1 | 2 | 图片中变量名name的差异 3 | 4 | 1.根据函数表达式： 5 | 6 | function functionName （a）{ } 7 | 8 | 关键字 函数名 形参//形参可以是0或多个 9 | 10 | 得出function output（name）中的name为函数output的形参，相当于一个空壳子，还没有实际值。 11 | 12 | 2.根据声明变量，给变量赋值的形式为： 13 | var variableName = "xxxxxx", 14 | 得出var name = 'Hello,JS'中的name为一个独立变量名，且这时它被赋了值，值为Hello,JS。 15 | 16 | 3.根据调用函数的形式： 17 | 18 | functionName （ a ） 19 | 20 | 函数名 实参 21 | 22 | 得出output（name）中的name为函数output的实参，是已经被var赋过值的，值是Hello,JS 。 23 | 24 | 25 | ps：代码还没跑，先把容易的作业交了，似乎能减轻点心里压力哈。 -------------------------------------------------------------------------------- /homework/lesson5/lipeng.md: -------------------------------------------------------------------------------- 1 | 1 2 | 3 | ```javascript 4 | function output(name){ 5 | console.log(name); 6 | } 7 | 8 | var name = 'Hello, JS'; 9 | output(name); 10 | ``` 11 | 12 | 第1行 `name`为 函数output声明的参数变量。 13 | 14 | 第5行、name 为定义的一个叫做name的字符串变量，并且赋值'Hello, JS' 15 | 16 | 第6行，name 为第5行定义的 name 字符串变量，在调用output函数时，被当做参数传进去。 17 | 18 | -------------------------------------------------------------------------------- /homework/lesson5/liujun.md: -------------------------------------------------------------------------------- 1 | # name变量的差异： 2 | ## 第1行name变量：是function output的参数，可以name,name1,或者是空值，都可以。之所以根下面的name一致，是为了代码易读和便于维护。 3 | ## 第5行的name变量：是声明了一个叫name的变量，并赋值‘Hello,JS’给了它，它是一个全局变量。可以任意调用。 4 | ## 第6行name变量：是把第5行定义的变量的值‘Hello,JS’给到了函数output. -------------------------------------------------------------------------------- /homework/lesson5/liuruyong.md: -------------------------------------------------------------------------------- 1 | # 下面代码1，5，6行name差异 2 | function output(name) { 3 | console.log(name); 4 | } 5 | var name = 'Hello,JS' 6 | output(name) 7 | 8 | 9 | 第1行name，函数的参数名 parameter 10 | 第5行name，字符串类型变量 11 | 第6行name，给函数的参数赋值，函数参数实际表示的值，argument 12 | -------------------------------------------------------------------------------- /homework/lesson5/liushengxin.md: -------------------------------------------------------------------------------- 1 | # 第五节课代码分析 2 | 3 | 1. function output(name) { 4 | 2. console.log(name); 5 | 3. } 6 | 7 | 4. var name = 'Hello,JS'; 8 | 5. output(name);` 9 | 10 | 第1行、第4行、第5行的name变量都有什么差异？ 11 | 12 | 第1行的name是异步调用的一个变量或者函数、表示的调用的后面的一个叫name的能满足一定功能的变量或者函数。 13 | 14 | 第4行的name是一个变量、var语句将Hello,JS这个代码内容赋值给name 15 | 16 | 第5行的name是将第4行的name变量进行输出操作，也就是输出 Hello,JS 17 | 18 | 19 | -------------------------------------------------------------------------------- /homework/lesson5/luoruijun.md: -------------------------------------------------------------------------------- 1 | # 第5课作业 分析代码 2 | 1. 第一行的变量name是函数output的参数，只是说明此函数需要一个什么参数，定义函数时设计此参数如何参与运算，参数是什么名称（name\name1/myname）都不影响运算情况和结果。 3 | 2. 第五行的变量name：定义一个名称为name的变量,并赋值为‘Hello,js’。 4 | 3. 第六行调用output函数，此时output()内的参数使用第五行定义的变量name，其值是' Hello,js'，此变量实际进行运算，和第一行、第二行的name是不一样的。 5 | -------------------------------------------------------------------------------- /homework/lesson5/marshalcy.md: -------------------------------------------------------------------------------- 1 | ### 作业1 2 | function output(name){ 3 | console.log(name); 4 | } 5 | 6 | var name = ‘hello,js’; 7 | output(name); 8 | 9 | 第一行的name是一个形式上的参数， 10 | 第五行的name是一个变量，这个变量的名字叫name， 11 | 第六行的name是实际的参数， 12 | 13 | 第二行的打印name，就是第一行传入第六行实际的参数name的值，值是第五行变量的hello js。 14 | 15 | -------------------------------------------------------------------------------- /homework/lesson5/oyanagchun的作业: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /homework/lesson5/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 今天的间接返回的处理手法理解上会有难度，而这就是js最难的部分。后面的所有课程都是在使用这些技巧来处理代码流程。完全不用担心现在的懵逼状态。 3 | 4 | 把作业做好。 5 | 6 | 【作业内容】 7 | 1. 阅读study/lesson5的sample代码 8 | 2. 下面代码中，第1行、第4行、第5行的name变量都有什么差异？ 9 | 10 | ``` 11 | 1. function output(name) { 12 | 2. console.log(name); 13 | 3. } 14 | 15 | 4. var name = 'Hello,JS'; 16 | 5. output(name); 17 | ``` 18 | 19 | 【提交方式】 20 | 1. 请向getting-started-with-javascript项目发起pull request。 21 | 22 | https://github.com/xugy0926/getting-started-with-javascript 23 | 24 | 3. 提交homework/lesson5目录下。 25 | 4. 以自己的名字命名md文件提交。 26 | 5. 27 | -------------------------------------------------------------------------------- /homework/lesson5/shaozhen.md: -------------------------------------------------------------------------------- 1 | ### 第一行的name是局部变量，只能在函数内部访问它，只要函数运行完毕，局部变量就会被删除。 2 | 3 | 4 | 5 | ### 第五行的name是全局 JavaScript 变量，在任何位置都可以访问。 6 | 7 | 8 | 9 | ### 第六行的name是函数的参数，在调用函数时，可以向其传递值 10 | 11 | -------------------------------------------------------------------------------- /homework/lesson5/shenzhili.md: -------------------------------------------------------------------------------- 1 | #第五节课作业： 2 | 3 | **代码中第1行、第4行、第5行的name变量有什么差异？** 4 | 5 | ```javascript 6 | function output(name){ 7 | console.log(name); 8 | } 9 | 10 | var name = 'Hello, JS'; 11 | output(name); 12 | ``` 13 | 14 | 第一行的name是function函数中的变量(形参)。调用函数时，函数体用形参进行逻辑处理（计算），之后再将实参传入形参，得出结果。 15 | 16 | 第四行声明了一个变量，变量名为name，随后赋值给它"Hello,JS" 17 | 18 | 第五行的name是第四行的变量，此时，name是作为一个实参传给函数去做处理。 19 | 20 | 21 | **从作用(性质)上来看：** 22 | 23 | 第一行：函数的变量(名),形参(parameter) 24 | 25 | 第五行：变量(名) 26 | 27 | 第六行：变量(名)，作为实参传入函数。 28 | 29 | **从值来看：** 30 | 31 | 第一行：只是形参，内部没有数据，需要被赋值。 32 | 33 | 第五行：变量值="Hello,JS" 34 | 35 | 第六行：变量值="Hello,JS" -------------------------------------------------------------------------------- /homework/lesson5/sophieQi.md: -------------------------------------------------------------------------------- 1 | 代码中第1行、第4行、第5行的name变量有什么差异？ 2 | ```javascript 3 | function output(name){ 4 | console.log(name); 5 | } 6 | 7 | var name = 'Hello, JS'; 8 | output(name); 9 | ``` 10 | 第4行 变量名为name。 11 | 第1行定义函数为name,也可以是其他的名称，比如name1，相应的第二行也要改为name1。 12 | 第5行，name为执行对象。输出name的值。 13 | -------------------------------------------------------------------------------- /homework/lesson5/tangjianfeng.md: -------------------------------------------------------------------------------- 1 | ##Homework of lesson5 2 | 3 | 第1行、第5行、第6行的name变量都有什么差异？请分析差异提交你的结论。 4 | 5 | function output(name) { 6 | 7 | 8 | console.log(name); 9 | 10 | } 11 | 12 | var name = 'Hello,JS'; 13 | 14 | output(name); 15 | 16 | 17 | 第一行的name是定义run函数的一个参数，这个参数和第5、6行的name不是同一个东西，第5行的name是被‘Hello,JS'这个字符串赋值的一个变量，然后第6行的name就是把第5行的字符串当参数调进函数output（name）中，这样打印出来的就是‘Hello，JS’ 18 | 19 | 用自己的话说就是function output(name)就是在自定义一个函数，也就是做一个自己的工具，当在name参数的位置放一个变量进去的时候，就会打印出这个变量，第1行的name这个参数就算命名成mingzi也无所谓，只要下面的console.log的括号中的参数也变成mingzi就可以了，即console.log(mingzi); 20 | 而第5行的name也可以变成其他的名字，例如myName，只要下面第6行的output中的括号中的内容也写成myName，就可以了。说到底，真正重要的是function output(name)这个函数是怎么定义的，变量名倒不是重点，当然最好能命名得清楚些，例如有些函数的参数必须要数组的，那就把参数变量名写成myArray这种名称，这样就容易让人理解，否则很容易会被人传个字符串或者整数这种不合适的参数传进去，这样就不好了。 -------------------------------------------------------------------------------- /homework/lesson5/wangchangqing.md: -------------------------------------------------------------------------------- 1 | ## 问：图片上的代码，第1行、第5行、第6行的name变量都有什么差异？请分析差异提交你的结论。以你名字命名的md文件提交。 2 | 3 | ![mark](http://ou7elf9tx.bkt.clouddn.com/blog/170903/d113EmK15J.jpg?imageslim) 4 | 5 | 第1行的name是一个**“形式变量”**。在这里并没有什么实际的含义，只要和下文中的“XXX”保持一致即可，都可以传达出“这是一个输入什么，就可以输出什么的函数”这么一个意思。 6 | 7 | 第5行的name是一个**等待被赋值的变量**。在这里，它被赋值为<'Hello,JS'>。 8 | 9 | 第6行的name是一个**已经被赋值的“实际变量”**，正在被输入函数output中，经过逻辑处理，获得结果。 10 | 11 | **结论：** 12 | 13 | 在定义函数时，变量叫什么名字不是特别重要，因为这个时候它没有实际的含义，只是一个用来解释“这个函数如何处理数据”的**工具**和**象征**。 14 | 15 | 当实际调用这个函数时，需要先对函数所需要的变量或者参数赋值，然后将赋值后的变量代入函数之中，以求得最终的结果。这个时候，变量的名字和值就很重要了，因为名字反映了它的用途和意义，而它的值直接决定了我们能否得到想要的结果。 -------------------------------------------------------------------------------- /homework/lesson5/wangwei.md: -------------------------------------------------------------------------------- 1 | ## 1. 阅读study/lesson5的sample代码，并执行观察结果。 2 | > #### 已阅读 3 | 4 | 5 | ## 2. 图片上的代码，第1行、第5行、第6行的name变量都有什么差异？请分析差异提交你的结论。以你命名的md文件提交。 6 | > ![](https://o3b126ie1.qnssl.com/avatar/081d10a4-6e49-47a5-8f9b-ca7d48dacb78) 7 | >> #### 1. 第5行和第6行的`name `是 同一个` name `, 第5行是对 声明 定义一个变量` name `, 并把字符串 `‘Hello,JS’` 赋值给`name` 8 | 9 | 10 | >> #### 2. 第1行的`name`和 第5行 第6行 不是同一个`name`, 他的 作用域 只在 函数`output()` 11 | 里面，在第6行调用函数`output(name)`时， 把第6行`name`的值，赋值给 第1行的`name`, 他是值的一种传递吧。 -------------------------------------------------------------------------------- /homework/lesson5/wengguihua.md: -------------------------------------------------------------------------------- 1 | ## 变量差异 2 | 3 | 第1行变量：作为函数的形参，作用域仅限于函数内部，是局部变量，引用该函数时变量名可以与定义的不一致。 4 | 5 | 第5行变量：声明了一个变量，并定义了一个变量，同时将Hello，JS这组字符串赋值给变量，这是一个字符串变量，该变量为全局变量。 6 | 7 | 第6行变量：该变量为第5行所定义的变量作为实参传递给函数。 8 | 9 | ## 观察代码 10 | 重点对厨房工作流的代码进行思考，主要结论为：执行工作流函数后，第一步准备函数开始执行，然后通过条件语句判断是否准备完成，完成后买菜函数开始执行，完成后将结果通过callback函数A传递给做菜函数，同时通过该callback函数A启动执行做菜函数，做菜函执行数完成后将结果通过callback函数B，该callback函数B完成上菜程序。整个工作流为大家开始做准备工作，然后主管安排人买菜，买好菜后通过物流渠道把菜交给做菜的，做菜做好后通过上菜渠道把菜交给上菜的。主管交代完后大家就买菜的就开始干活了，主管也去洗澡了。 -------------------------------------------------------------------------------- /homework/lesson5/wenliuxin.md: -------------------------------------------------------------------------------- 1 | # 5thHomeworkd 2 | 3 | 第一行的name是参数，可以把这个name看成收纳盒的盒子，它要装的材料是name这样一个东西（就是性质为name的东西）。 4 | 第五行的name是一个参数，它等于Hello,JS，这个name就是一个材料。 5 | 第六行的name是输入函数output的数据，也就是材料，这个材料就是第五行的‘name = hello，js’，它虽然和第一行的name位置一样，但是，其实第一行是盒子，也这一行是材料，也可以说是盒子里有了材料。 6 | -------------------------------------------------------------------------------- /homework/lesson5/wenyunxin.md: -------------------------------------------------------------------------------- 1 | ## 三个name变量的差异 2 | 3 | ### 第一行的name变量 4 | 这里的name变量处于函数名后面括号里的位置，是属于这个函数的参数，也是这个函数的参数占位符。它表明这个函数至少需要传入一个参数才能正确被调用。这个name变量在这个函数里未被声明定义或赋值，表明他可以是函数允许传入的任何数据类型。 5 | 6 | ### 第五行的name变量 7 | 这里的name变量是一个全局变量名。它被声明定义并被赋值了'Hello JS'。它在全局的任何位置可以被直接拿来使用。 8 | 9 | ### 第六行的name变量 10 | 这里name变量是指调用函数ouput执行时传入的具体参数对象变量名称。它实际上就等价于'Hello JS'。实际上就是调用函数执行：output('Hello JS')。 -------------------------------------------------------------------------------- /homework/lesson5/wukuipin.md: -------------------------------------------------------------------------------- 1 | ### 第五课作业 2 | 3 | 代码分析： 4 | ``` 5 | function output(name) { 6 | console.log(name); 7 | } 8 | 9 | var name = 'Hello, JS'; 10 | output(name); 11 | ``` 12 | 13 | 第一行、第五行、第六行都有变量name。第五行的name是新申明定义的变量（这是一个全局变量），并给它赋值一个字符串‘Hello, JS’;那么，定义一个变量就得使用才行，不然就是垃圾代码，所以第六行代码就来调用第五行定义的变量(name)。同时，第六行也在调用第1~第3行定义的output函数，而output函数内部也有一个变量，恰好名字也是name（也就是第1行的name，这是一个局部变量），真是好巧啊！真所谓无巧不成书嘛！当然，它要是叫什么阿猫阿狗也行的，可偏偏他老爹也喜欢name这个名字，我们现在知道他也叫name，不过要清楚一点，这里的name和第5行的name是两个不同的变量，只是他们恰好叫同样的名字（name）而已。 14 | 15 | 第6行在调用函数和变量时，name变量的值会赋值给第1行的变量name，函数再把得到的值打印出来。最后结果会得到：Hello, JS 16 | 如下图： 17 | ![](https://ws4.sinaimg.cn/large/006tNc79gy1fiw94a35aoj30pd0770sx.jpg) 18 | -------------------------------------------------------------------------------- /homework/lesson5/xianengqi.md: -------------------------------------------------------------------------------- 1 | ## 【作业内容】 2 | 3 | ###第1行、第5行、第6行的name变量都有什么差异？ 4 | ``` 5 | function output(name) { 6 | console.log(name); 7 | } 8 | 9 | var name = 'xiaohua'; 10 | output(name); 11 | 12 | > 第一行的'name'可以是一个任意名，它是'形参'。第二行的'name'是把函数output（name）传递给了console.log.第二行的name要与第一行的name保持一致。 13 | 14 | > 第五行的'name'可以是一个任意名，声明了一个变量 'name'。 把'xiaohua'这个字符串赋值给了'name' 是'实参' 15 | 16 | > 第六行的'name'是被函数output调用了第五行的name，它和第五行一样都是'实参'。 -------------------------------------------------------------------------------- /homework/lesson5/yangtieming.md: -------------------------------------------------------------------------------- 1 | 2 | ##第1行、第5行、第6行的name变量都有什么差异？ 3 | 4 | > 1. function output (name) { 5 | > 2.     console.log(name)； 6 | > 3. } 7 | > 4. 8 | > 5. var name = 'Hello,JS'; 9 | > 6. output(name); 10 | 11 | 12 | 13 | 1. 第一行的name,是函数output的参数名称，它可以是任意值。 14 | 2. 第五行的name, 是一个被定义的变量，它被赋值成一个叫做'Hello,JS'的字符串。 15 | 3. 第六行的name, 也是函数output的参数名称，但此时它已不是任意值，只能是被赋值后的'Hello,JS'这个字符串。 -------------------------------------------------------------------------------- /homework/lesson5/youshilei.md: -------------------------------------------------------------------------------- 1 | #第五课作业 2 | ##作业题目 3 | 1. 阅读study/lesson5的sample代码，并执行观察结果。 4 | 2. 图片上的代码，第1行、第5行、第6行的name变量都有什么差异？请分析差异提交你的结论。以你命名的md文件提交。 5 | ##我的解答 6 | ```javascript 7 | function output(name){ 8 | console.log(name); 9 | } 10 | 11 | var name = 'Hello,JS'; 12 | output(name); 13 | ``` 14 | 15 | - 第1行name是自定义函数output用来传递的参数，通过它可以函数外部数值传递给函数内部，也就是第2行里的name。 16 | - 第5行name是新声明的变量，并且给它赋值。 17 | - 第6行name是自定义函数用于计算的变量，它调用的外部第5行name变量的值。 -------------------------------------------------------------------------------- /homework/lesson5/zhanggaoyang.md: -------------------------------------------------------------------------------- 1 | 第五课作业 2 | 3 | outpu是一个函数名 4 | 5 | function output(name) { 6 | console.log(name); 7 | } 8 | 9 | var name = 'Hello,js'; 10 | output(name); 11 | 12 | output是一个函数变量，var定义了一个值`'Hello,js'`而这个值被传入到`function`函数里，所以`function`是一个按值传递，即虽然参数不同但不影响结果。 13 | 所以，函数的`name`和var定义的`name`是不同的。 -------------------------------------------------------------------------------- /homework/lesson5/zhaoyinan.md: -------------------------------------------------------------------------------- 1 | ##关于JS学习最困难的部分## 2 | 3 | 1.补作业： 4 | 在上课时听老师说这部分就是JS最难的一部分，心想如果这就是最难的部分，为何不尝试着去攻克它？让自己JS能有更深入的学习？于是就暗下决心开始了自己的补作业之路。 5 | 6 | 2.写作业： 7 | 在开始劫笔写之前，看了何伟和云飞的作业，都写的非常不错且细致，很是佩服他们认真学习的态度和钻研精神，看来还需要不断努力才是啊。自己一向写文章没有什么基础，没有什么逻辑和思路可言，只能试着不断写，看看能不能接近这些优秀的同学。 8 | 9 | 3.正式写作业： 10 | 代码，第1行、第5行、第6行的name变量都有什么差异？ 11 | ``` 12 | 1. function output(name) { 13 | 2. console.log(name); 14 | 3. } 15 | 4. var name = 'Hello,JS'; 16 | 5. output(name); 17 | ``` 18 | 这里有必要先提一下关于“形参”和“实参”这两个概念： 19 | 形参——只是作为表示符号，其作用范围仅仅在函数表达式之内，并且由于在函数表达式内并未对其进行赋值，因此它并不具有实际意义或实际值，而只能当作是一个传递变量值的载体或工具。代码中的第1行中的name就属于形参。 20 | 21 | 实参——由于经过了变量赋值，函数变量值代入等2个步骤，第5、6行中的name就具有的实际的参数，因此称为实参。 22 | 23 | 24 | -------------------------------------------------------------------------------- /homework/lesson5/zhouqizhou.md: -------------------------------------------------------------------------------- 1 | # 第五课作业 2 | 3 | ## 第一个name 4 | 5 | 函数里面的参数，也称形参，主要跟函数内部的中的变量名相对应 6 | 7 | ## 第二个name 8 | 9 | 是整体函数定义之后再文件中使用 10 | 11 | ## 第三个name 12 | 13 | 获取第二name的值，并传递给函数使用 14 | -------------------------------------------------------------------------------- /homework/lesson5/zhuningning.md: -------------------------------------------------------------------------------- 1 | ```function output(name) { 2 | console.log(name); 3 | } 4 | 5 | var name = 'Hello,JS'; 6 | output(name); 7 | ``` 8 | 9 | 10 | * 第1行、name 为函数output的参数属于局部没有赋值的变量。 11 | * 第5行、name 为声明字符串变量，并赋值'Hello, JS' 12 | * 第6行，name 为第5行定义的 name 字符串变量，在调用output函数时,被当做参数传进去。 13 | -------------------------------------------------------------------------------- /homework/lesson5/zhutinglesson5.md: -------------------------------------------------------------------------------- 1 | function output(name){ 2 | console.log(name); 3 | } 4 | 5 | var name = 'Hello.js'; 6 | output(name); 7 | 8 | 第一行： name是函数output的入参，此处只是一个名称，需要调用函数时传入。比如第6行的调用传入的就是Hello.js 9 | 第二行：与第一行一样，打印函数入参，调用函数时传入 10 | 第五行：name是个变量，并且赋值为 Hello.js 11 | 第六行：同第五行，传入变量名，可以理解为一个代号 12 | -------------------------------------------------------------------------------- /homework/lesson5/zhuyongjin.md: -------------------------------------------------------------------------------- 1 | 下面代码中，第1行、第4行、第5行的name变量都有什么差异？ 2 | 3 | ``` 4 | 1. function output(name) { 5 | 2. console.log(name); 6 | 3. } 7 | 8 | 4. var name = 'Hello,JS'; 9 | 5. output(name); 10 | ``` 11 | 12 | 【回答】 13 | 14 | 针对上面的整个，我是这么理解的。就像是一道数学题。 15 | 16 | 第一行：建立一个函数 F(x) 17 | 第二行；输出这个函数 =x 18 | 19 | 第五行：告知X的具体值，这里面叫赋值 x=Hello,JS 20 | 第六行：输出整个函数f(x)具体值，也就是 Hello，JS 21 | 22 | 23 | 在我看来，第一行Name, 是函数未知变量，可以是某个值，也可以是运行后的值 24 | 第四行Name, 是赋值，赋值给第一行Name 的一个具体值 25 | 第五行Name, 是输出值，相当于问 F(x)的结果 -------------------------------------------------------------------------------- /homework/lesson5/谢玉辉.md: -------------------------------------------------------------------------------- 1 | function output(name){ //使用function定义一个函数，函数名叫output，括号里的name为参数。 2 | console.log(name); 3 | } 4 | 5 | var name = 'hello,js'; //定义一个名为'name'的字符串变量，并赋值'hello,js' 6 | output(name); //调用'function output(name)'函数并把'name'变量的值 （也就是'hello,js') 作为参数传到这个函数的肚子里面去。 7 | -------------------------------------------------------------------------------- /homework/lesson6/GaoXianfeng.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var filePath = '../words'; // 该脚本文件在 script 目录下 3 | var outputPath = 'out_put_async.txt'; 4 | 5 | fs.readdir(filePath, function(err, files) { 6 | if (err) { 7 | console.log('获取文件失败'); 8 | return; 9 | } 10 | 11 | if (files.length <= 0) { 12 | console.log('没有找到任何文件'); 13 | } else { 14 | console.log('开始写入'); 15 | fs.writeFile(outputPath, files, function(err) { 16 | if (err) { 17 | console.log('写入文件失败'); 18 | } else { 19 | console.log('写入文件成功'); 20 | } 21 | }); 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /homework/lesson6/WuGaoxing.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | fs.writeFileSync((__dirname)+'/fileNameCollection.txt', fs.readdirSync(__dirname)); -------------------------------------------------------------------------------- /homework/lesson6/caijinpeng.js: -------------------------------------------------------------------------------- 1 | 2 | var fs=require('fs'); 3 | var dirPathString='./'; 4 | var files=fs.readdirSync(dirPathString); 5 | var outputPathString = './write_file_sync.txt'; 6 | var fileContent =files; 7 | fs.writeFileSync(outputPathString, fileContent); -------------------------------------------------------------------------------- /homework/lesson6/chenrushan.js: -------------------------------------------------------------------------------- 1 | 2 | const fs = require('fs'); 3 | 4 | const dirPathString = '../../../words-from-the-heart/words'; 5 | const filePathString = '../../../test-code/write_file_async.txt'; 6 | 7 | fs.readdir(dirPathString, function (err, files) { 8 | 9 | if (err) { 10 | console.error('读取文件失败'); 11 | return; 12 | } 13 | 14 | if (files.length > 0) { 15 | fs.writeFile(filePathString, files, function (err) { 16 | if (err){ 17 | console.error('写文件失败'); 18 | } else { 19 | console.log('写文件成功'); 20 | } 21 | }); 22 | } else { 23 | console.log('没有找到任何文件'); 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /homework/lesson6/chenziwen.js: -------------------------------------------------------------------------------- 1 | // # 扫描某个文件夹的所有内容 # 2 | 3 | /* =====================================同步方案Start */ 4 | 5 | 6 | // 引入fs模块 7 | var fs = require('fs'); 8 | 9 | // 定义要查询的目标文件夹。 10 | var dirPathString = '../../../words-from-the-heart'; 11 | 12 | // 调用fs.readdirSync()方法读取目录内容，并把结果赋值给files，打印files 13 | var files = fs.readdirSync(dirPathString); 14 | console.log(files); 15 | 16 | /* =====================================将内容写入到文件中 */ 17 | 18 | 19 | 20 | 21 | // 定义要写入的文件路径 22 | var outputPathString = './write_file_sync.txt'; 23 | // 定义文件内容变量fileContent 24 | var fileContent = files; 25 | 26 | //调用fs的writeFileSync函数来写文件 27 | fs.writeFileSync(outputPathString, fileContent); 28 | 29 | 30 | 31 | /* =====================================同步方案End */ 32 | 33 | 34 | -------------------------------------------------------------------------------- /homework/lesson6/dangfeipeng.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | // 最简单的实现，为了确保正确执行，应将此文件放在 words-from-the-heart 项目的 script 文件夹下（编码约定） 4 | var dirPathString = '../words'; 5 | var filePathString = './words_file_names.txt'; 6 | 7 | var fileNames = fs.readdirSync(dirPathString); 8 | 9 | if (fileNames.length > 0) { 10 | // 异步写入返回值 err 可以明确判定写入是否成功，而同步写入只返回了 undefined，意义不明，所以采用异步写入 11 | fs.writeFile(filePathString, fileNames, function (err) { 12 | if (err) { 13 | console.log('文件写入失败'); 14 | } else { 15 | console.log('文件写入成功'); 16 | } 17 | }); 18 | } else { 19 | console.log('读取文件失败'); 20 | } 21 | -------------------------------------------------------------------------------- /homework/lesson6/dengxy0907.js: -------------------------------------------------------------------------------- 1 | 2 | var fs =require('fs');//引入fs模块 3 | var dirPathString = '../paixu/WORDS-FROM-THE-HEART';//定义要查询的文件夹 4 | var files =fs.readdirSync(dirPathString); 5 | var needFiles= []; 6 | (function filesContent(){ 7 | for(i=0;i 0){ 9 | for(var i = 0;i < files.length; i++){ 10 | files[i] = files[i] + '\n'; 11 | } 12 | } 13 | 14 | //回调函数，作用是告诉调用者，写文件的结果 15 | function callback(err) { 16 | if (err) { 17 | console.log('写文件失败'); 18 | } else { 19 | console.log('写文件成功'); 20 | } 21 | } 22 | 23 | fs.writeFile(outputPathString,files,callback); 24 | 25 | 26 | -------------------------------------------------------------------------------- /homework/lesson6/fanliao.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var dirPathString = './'; 3 | function callback(err, files) { 4 | if (err) { 5 | console.log('读取文件失败'); 6 | } 7 | if (files.length > 0) { 8 | var filePathString = '../xlh.txt'; 9 | var fileContent = files.join("\n"); 10 | fs.writeFile(filePathString, fileContent, call); 11 | } else { 12 | console.log('没有找到任何文件'); 13 | } 14 | } 15 | fs.readdir(dirPathString, callback); 16 | function call(err) { 17 | if (err) { 18 | console.log('写文件失败'); 19 | } else { 20 | console.log('写文件成功'); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /homework/lesson6/haohu.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | 3 | var dirPathString = '../lesson1' 4 | var txtPathString = './haohu.txt' 5 | 6 | function readCallback(err, files) { 7 | if (err) { 8 | console.log('读取文件失败') 9 | return 10 | } 11 | if (files.length > 0) { 12 | writeToTxtFile(files) 13 | } else { 14 | console.log('没有找到文件') 15 | } 16 | } 17 | 18 | function writeCallback(err) { 19 | if (err) { 20 | console.log('写入文件失败') 21 | } else { 22 | console.log('写入文件成功') 23 | } 24 | } 25 | 26 | function writeToTxtFile(filesArray) { 27 | fs.writeFile( txtPathString, filesArray.join("\n"), writeCallback ) 28 | } 29 | 30 | fs.readdir( dirPathString, readCallback ) 31 | -------------------------------------------------------------------------------- /homework/lesson6/jaykeyGuo.js: -------------------------------------------------------------------------------- 1 | //引入FileSystem 2 | var fs = require('fs'); 3 | //定义读取路径 4 | var dirPathString = '../../../words-from-the-heart/words'; 5 | //定义写出路径 6 | var filePathString = "../write_words_async.txt" 7 | //定义写出回调函数 8 | function callbackForWrite(err) { 9 | //检查 10 | if (err) { 11 | console.log('写文件失败'); 12 | } else { 13 | console.log('写文件成功'); 14 | } 15 | } 16 | //定义读取路径 17 | function callbackForRead(err, files){ 18 | //检查读取路径 19 | if (err){ 20 | console.log("读取文件失败"); 21 | return; 22 | } 23 | 24 | if (files.length > 0) { 25 | //调用写入 26 | fs.writeFile(filePathString, files, callbackForWrite); 27 | } else { 28 | console.log("没有找到任何文件"); 29 | } 30 | } 31 | 32 | fs.readdir(dirPathString, callbackForRead); 33 | -------------------------------------------------------------------------------- /homework/lesson6/lesson9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson6/lesson9.jpg -------------------------------------------------------------------------------- /homework/lesson6/lianghf.js: -------------------------------------------------------------------------------- 1 | 2 | var fs = require('fs'); 3 | 4 | var dirPathString = '../../my_work/words-from-the-heart'; 5 | 6 | var files = fs.readdirSync(dirPathString); 7 | 8 | //console.log(files); 9 | 10 | var outputPathString = '../my_test/jsonFileName.txt'; 11 | 12 | var fileContent = files; 13 | 14 | fs.writeFileSync(outputPathString,fileContent); 15 | 16 | 17 | //问题一：函数回调的方法没有憋出来。 18 | //问题二：把所有文件的名字都写进入了，怎么把非json文件名去除掉啊？ 19 | -------------------------------------------------------------------------------- /homework/lesson6/limingxing.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 扫描某个文件夹的内容,并将内容写入txt文件中 3 | */ 4 | 5 | // 引入fs模块 6 | var fs = require('fs'); 7 | 8 | // 定义要查询的目标文件夹 9 | var dirPathString = '../../../words-from-the-heart'; 10 | 11 | // 调用fs的readdirSync函数来读取文件 12 | var files = fs.readdirSync(dirPathString); 13 | console.log(files); 14 | 15 | // 定义要写入的文件路径 16 | var filePathString = './wish_filename.txt'; 17 | 18 | // 定义文件内容变量 19 | var fileContent = fs.readdirSync(dirPathString); 20 | 21 | // 定义一个callback函数，用于接收写文件的返回结果 22 | function callback(err) { 23 | if (err) { 24 | console.log('写文件失败'); 25 | } else { 26 | console.log('写文件成功'); 27 | } 28 | } 29 | 30 | // 调用fs的writeFile函数来写文件 31 | fs.writeFile(filePathString,fileContent,callback); 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /homework/lesson6/liujun.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | var fs = require('fs'); 4 | 5 | var dirPathString = '../../../words-from-the-heart'; 6 | 7 | var filePathString = './info.txt'; 8 | 9 | function readCallback(err, files) { 10 | if (err) { 11 | console.log('读取文件失败'); 12 | return; 13 | } 14 | if (files.length > 0) { 15 | console.log(files); 16 | var fileContent = files; 17 | fs.writeFile(filePathString,fileContent,writeCallback) 18 | 19 | } else { 20 | console.log('没有找到任何文件'); 21 | } 22 | } 23 | 24 | function writeCallback(err) { 25 | if (err) { 26 | console.log('写文件失败'); 27 | } else { 28 | console.log('写文件成功'); 29 | } 30 | } 31 | fs.readdir(dirPathString, readCallback); 32 | 33 | -------------------------------------------------------------------------------- /homework/lesson6/liuliyuan.js: -------------------------------------------------------------------------------- 1 | //异步 2 | var fs = require('fs'); 3 | 4 | var dirPathString = '../../../words-from-the-heart'; 5 | 6 | function scan_callback(err,files) { 7 | if (err) { 8 | console.log('读取文件失败'); 9 | } 10 | 11 | if(files.length > 0) { 12 | console.log(files); 13 | var filePathString = './liuliyuanAsync.txt'; 14 | var fileContent = files.join("\n"); 15 | fs.writeFile(filePathString, fileContent, write_callback); 16 | console.log(files.length); 17 | } else { 18 | console.log('没有找到任何文件'); 19 | } 20 | } 21 | 22 | fs.readdir(dirPathString,scan_callback); 23 | 24 | function write_callback (err) { 25 | if (err) { 26 | console.log('写文件失败'); 27 | } else { 28 | console.log('写文件成功'); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /homework/lesson6/liushengxin.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // 引入fs模块 4 | var fs = require('fs'); 5 | 6 | // 定义要查询的目标文件夹。如果你想查lesson2的内容，就修改下面路径字符串。 7 | var dirPathString = '/Users/jackmac/getting-started-with-javascript/homework/lesson5'; 8 | // 定义要写入的文件路径 9 | var filePathString = '/Users/jackmac/getting-started-with-javascript/homework/lesson6/liushengxin_file_async.txt'; 10 | 11 | // 定义文件内容变量fileContent 12 | var fileContent = fs.readdirSync(dirPathString); 13 | 14 | // 定义一个callback函数，用于接收写文件的返回结果 15 | function callback(err) { 16 | if (err) { 17 | console.log('写文件失败'); 18 | } else { 19 | console.log('写文件成功'); 20 | } 21 | } 22 | 23 | //调用fs的writeFile函数来写文件 24 | fs.writeFile(filePathString, fileContent, callback); -------------------------------------------------------------------------------- /homework/lesson6/luoruijun.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var dirPathString = '../../homework/lesson1'; 3 | var filePathString = './write_file_async.txt'; 4 | function callback(err, files) { 5 | if (err) { 6 | console.log('读取文件失败'); 7 | } 8 | 9 | if (files.length > 0) { 10 | console.log(files); 11 | fs.writeFile(filePathString, files, callback1); 12 | } else { 13 | console.log('没有找到任何文件'); 14 | } 15 | } 16 | 17 | function callback1(err) { 18 | if (err) { 19 | console.log('写文件失败'); 20 | } else { 21 | console.log('写文件成功'); 22 | } 23 | } 24 | 25 | function scanAndWriteFiles_async(callback){ 26 | fs.readdir(dirPathString, callback); 27 | } 28 | 29 | scanAndWriteFiles_async(callback); 30 | -------------------------------------------------------------------------------- /homework/lesson6/ouyangchun.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/homework/lesson6/ouyangchun.js -------------------------------------------------------------------------------- /homework/lesson6/readme.md: -------------------------------------------------------------------------------- 1 | 【第六节课作业】帮我整理数据 2 | 3 | 在words-from-the-heart项目中收到了很多同学的心声。我想把这些json的文件名整理到一个txt文件中。但苦于文件里太多。请帮我写个整理文件名的脚本代码。 4 | 5 | 请参考study/lesson6的的代码，共4个文件。 6 | 7 | 关于相对路径的理解请参考：https://github.com/xugy0926/getting-started-with-javascript/blob/master/topics/%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84.md

 8 | 9 | 【作业内容】
 10 | 11 | 1. 以自己的名字命名一个js文件。 12 | 2.先扫描文件夹，再把读到的文件名写入到某个txt文件。 13 | 14 | 【特别注意】 15 | 只提交一个你命名的js文件即可，我只要代码。不要给我txt结果文件。

 16 | 17 | 【提交方式】
 18 | 19 | 1. 请向getting-started-with-javascript项目发起pull request。

https://github.com/xugy0926/getting-started-with-javascript

 20 | 2. 提交homework/lesson6目录下。 21 | -------------------------------------------------------------------------------- /homework/lesson6/shenzhili.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 尝试用同步读取文件名，用异步的方式写入文件名 3 | * 此js文件放在words-from-the-heart文件夹下 4 | */ 5 | 6 | var fs = require('fs'); 7 | 8 | var dirPathString = './'; 9 | var filePathString = './words-from-the-heart.txt'; 10 | 11 | var fileContent = fs.readdirSync(dirPathString); 12 | 13 | fs.writeFile(filePathString, fileContent,function(err) { 14 | if (err) { 15 | console.log('写文件失败'); 16 | } else { 17 | console.log('写文件成功'); 18 | } 19 | } 20 | ); 21 | -------------------------------------------------------------------------------- /homework/lesson6/tangjianfeng.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | var dirPathString = '../../homework/lesson1'; 4 | 5 | var outputPathString = './write_lesson1_sync.txt'; 6 | var files = fs.readdirSync('../../homework/lesson1') 7 | 8 | function callback(err, files) { 9 | if (err) { 10 | console.log('读取文件失败'); 11 | } 12 | else if (files.length >0) { 13 | console.log(files); 14 | } else { 15 | console.log('没有找到任何文件'); 16 | } 17 | } 18 | 19 | function callbackwrite(err) { 20 | if (err) { 21 | console.log('写文件失败'); 22 | } else { 23 | console.log('写文件成功'); 24 | } 25 | } 26 | 27 | 28 | 29 | 30 | 31 | fs.readdir(dirPathString, callback); 32 | fs.writeFileSync(outputPathString,files,callbackwrite() ); 33 | -------------------------------------------------------------------------------- /homework/lesson6/wangganzy.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var readDir = fs.readdirSync('./'); 3 | var filePathString = './write_file_async.txt '; 4 | 5 | function weixin(err){ 6 | if(err){ 7 | console.log('写文件失败'); 8 | } 9 | else { 10 | console.log('写文件成功'); 11 | } 12 | } 13 | fs.writeFile(filePathString,readDir,weixin); 14 | -------------------------------------------------------------------------------- /homework/lesson6/wangshasha.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | var files = fs.readdirSync("../../../words-from-the-heart"); 4 | console.log(files); 5 | 6 | function callback(err, files) { 7 | if (err) { 8 | console.log('文件写入失败'); 9 | } else { 10 | console.log('成功'); 11 | } 12 | } 13 | var OutPutPathString = './write_file_sync.txt' 14 | fs.writeFile(OutPutPathString, files, callback) -------------------------------------------------------------------------------- /homework/lesson6/wangwei.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | var dirPathString = '../../../words-from-the-heart'; 4 | 5 | var files = fs.readdirSync(dirPathString); 6 | 7 | for(var i=0; i < files.length; i++) { 8 | var filesContent = filesContent + files[i] + '\n\n'; 9 | } 10 | 11 | var outputPathString ='../../../write_file.txt'; 12 | 13 | fs.writeFileSync(outputPathString, filesContent); -------------------------------------------------------------------------------- /homework/lesson6/weiyang.js: -------------------------------------------------------------------------------- 1 | // 引入fs模块 2 | var fs = require('fs'); 3 | 4 | // 定义要查询的目标文件夹。如果你想查lesson2的内容，就修改下面路径字符串。 5 | var dirPathString = '../../../words-from-the-heart'; 6 | 7 | // --------------------------------- 8 | // 同步方案 9 | 10 | var files = fs.readdirSync(dirPathString); 11 | // console.log(files); 12 | fs.open('words-from-the-heart', 'w+', function (err, fd) { 13 | for (i in files) { 14 | // console.log(files[i]); 15 | if (files[i].indexOf('json') != -1) 16 | fs.writeSync(fd, files[i] + '\n'); 17 | } 18 | }) 19 | //fs.writeFileSync('words-from-the-heart', files); 20 | -------------------------------------------------------------------------------- /homework/lesson6/wenyunxin.js: -------------------------------------------------------------------------------- 1 | fs = require('fs'); 2 | 3 | var readfile = ('./words-from-the-heart'); 4 | var writefile = ('./words-from-the-heart.txt'); 5 | 6 | function callback(err, files) { 7 | if (err) { 8 | console.log('读取文件失败'); 9 | return; 10 | } 11 | 12 | if (files.length > 0) { 13 | console.log(files); 14 | fs.writeFileSync(writefile, files); 15 | } else { 16 | console.log('没有找到任何文件'); 17 | } 18 | } 19 | 20 | //调用fs的readdir函数读取所有文件 21 | fs.readdir(readfile, callback); -------------------------------------------------------------------------------- /homework/lesson6/zhaoxiaoxin.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var dirPathString = '../../../words-from-the-heart'; 3 | 4 | function callback1(err,files){ 5 | if(err){ 6 | console.log('读取文件失败'); 7 | return; 8 | }; 9 | if(files.length>0){ 10 | console.log(files); 11 | }else{ 12 | console.log('没有文件'); 13 | }; 14 | }; 15 | 16 | 17 | var outputPathString = './zhaoxiaoxin.txt'; 18 | var files = fs.readdirSync(dirPathString); 19 | 20 | function callback(err) { 21 | if (err) { 22 | console.log('写文件失败'); 23 | } else { 24 | console.log('写文件成功'); 25 | } 26 | } 27 | 28 | fs.writeFile(outputPathString,files,callback) 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /homework/lesson6/zhaoyinan.js: -------------------------------------------------------------------------------- 1 | //引入file system函数 2 | var fs = require('fs'); 3 | //定义读取、输出地址 4 | var dirPathString = '../../../words-from-the-heart'; 5 | var outputPathString = './titleInfo.txt'; 6 | //定义读取、反馈结果函数 7 | function readCallback(err, files) { 8 | if (err) { 9 | console.log('读取文件失败'); 10 | return; 11 | } 12 | if (files.length > 0) { 13 | console.log('已读取文件内容'); 14 | //调用写入函数，将files读取的用容传递给它 15 | fs.writeFile(outputPathString, files, writeCallback); 16 | } else { 17 | console.log('没有找到任何文件'); 18 | } 19 | } 20 | 21 | 22 | //定义写入、反馈结果函数 23 | function writeCallback(err) { 24 | if (err) { 25 | console.log('写文件失败'); 26 | } else { 27 | console.log('写文件成功'); 28 | } 29 | } 30 | 31 | // 调用fs的readdir函数来读取文件夹 32 | fs.readdir(dirPathString, readCallback); 33 | -------------------------------------------------------------------------------- /homework/lesson6/zouhainan.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | var dirPathString = '../files/my_project/words_from_the_heart/words-from-the-heart'; 4 | 5 | var outputPathString = './fileNames_async.txt'; 6 | 7 | fs.readdir(dirPathString, function (err, files) { 8 | if (err) { 9 | console.log('读取文件失败'); 10 | return; 11 | } 12 | if (files.length > 0) { 13 | console.log('到这里都没有问题'); 14 | console.log(files); 15 | fs.writeFile(outputPathString, files, function (err) { 16 | if (err) { 17 | console.log('写文件失败'); 18 | } else { 19 | console.log('写文件成功'); 20 | } 21 | }); 22 | } 23 | else { 24 | console.log('没有找到任何文件'); 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /homework/lesson7/GaoXianfeng.md: -------------------------------------------------------------------------------- 1 | ## 第七课总结 2 | ### 项目地址代码 3 | https://github.com/ruoshuigao/lesson7_homework 4 | 5 | ### 心里话地址： 6 | https://ruoshuigao.github.io/lesson7_homework/ 7 | 8 | ### 作业与课程内容总结 9 | 1. 课程内容部分：自己断断续续的学习了很长时间 JavaScript，但是每当在工作中遇到需要写 JS 时才意识到自学的 JS 又都还回去了，每次的工作任务还是上网查资料和文档完成，因为工作中写的少，自己平时也没有动手做一些额外的项目来巩固所学内容，所以每次学习的知识不久之后就又会忘掉，这次学习中，以前学习的内容慢慢涌现出来了。例如：课堂中老师讲授的函数定义与函数表达式。 10 | 2. 作业部分：参考了老师的实例，但是主要是自己思考思路、在 GitHub 中查阅 jsonfile 官方实例完成作业中数据读取功能。至于 html 文件，直接拷贝老师源代码。此次作业共用时4.5个小时，个人感觉作业完成的并不轻松。 11 | -------------------------------------------------------------------------------- /homework/lesson7/chenrushan.md: -------------------------------------------------------------------------------- 1 | # homework lesson7 2 | 3 | ## 仓库地址 4 | 5 | [words-in-hearts](https://github.com/Rushan-Chen/words-in-hearts) 6 | 7 | ## 网页地址 8 | 9 | [words-in-hearts](https://rushan-chen.github.io/words-in-hearts/) -------------------------------------------------------------------------------- /homework/lesson7/chenziwen.md: -------------------------------------------------------------------------------- 1 | # 第七课作业——展示同学们的心里话 2 | ## 项目地址 3 | > https://github.com/WindBlewSails/myFirst-repository 4 | ## 心里话展示页面地址 5 | > https://windblewsails.github.io/myFirst-repository/ 6 | 7 | 8 | ## 学习感受 9 | 这节课老师教了我们用Bootstrap来套用CSS表现，用VUE来展示数据，用JSONFILE第三方库来读取JSON文件内容。 10 | 11 | 完成这个作业用了我挺多时间的，先是解决老师设置的2个BUG，理清代码运行的过程。然后是搞清楚Bootstrap怎么套用，搞清楚VUE怎么把数据展现出来。最花时间而又没有成果的是想把头像和名字组合成一个正方形，心里话全部放到顶部的固定的位置，鼠标悬浮在哪位同学的头像上，顶部就会出现那位同学的心里话。或者是心里话就悬浮在头像的旁边。 12 | 13 | But no Results。 14 | 15 | CSS 和 VUE没有搞明白，只能按老师演示的完成了最基础的功能。 16 | 17 | 这又是眼高手低了呀。 -------------------------------------------------------------------------------- /homework/lesson7/cuiyuwei.md: -------------------------------------------------------------------------------- 1 | 2 | 作业地址： 3 | 团队 4 | https://fengkaiwater.github.io/Beijing-Olympics/ -------------------------------------------------------------------------------- /homework/lesson7/dangfeipeng.md: -------------------------------------------------------------------------------- 1 | https://dangfp.github.io/words_from_heart/index.html 2 | -------------------------------------------------------------------------------- /homework/lesson7/diaozhicong.md: -------------------------------------------------------------------------------- 1 | 2 | #第七次课作业 3 | 4 | ## 5 | 【网页部署】 6 | https://sam-tiao.github.io/Diaozhicong/ 7 | 【作业地址】 8 | https://github.com/Sam-Tiao/Diaozhicong 9 | ## 10 | 11 | 学到的关键知识点： 12 | 1.用后端jsonFile第三方库的方法读取众多文档写入一个Json文档； 13 | 2.初次用前端vue库的锚点方法将后端数据引入前端。 14 | 15 | 思考点： 16 | 本次作业，不知能否实现汇总的Json文档地址直接在前端vue的引用中实现直接挂钩（而不用拷贝进文档中），后面Json有更新，web端直接更新？ 如果能实现，该如何实现？需要那方面的知识？ -------------------------------------------------------------------------------- /homework/lesson7/fangqingyang.md: -------------------------------------------------------------------------------- 1 | ### 静态页面地址 2 | 3 | ### https://vfongv.github.io/LetMeTry/ 4 | 5 | ### 项目地址 6 | 7 | ### https://github.com/vFONGv/LetMeTry 8 | 9 | ### 要解决的问题 10 | 11 | * 网页加载太慢 12 | 13 | * 页面排版，巨幕的背景图片，页面的背景图片 14 | 15 | ​ 16 | 17 | ### 体会 18 | 19 | 1 走路的时候，总能想到点东西。 20 | 21 | 2 看文档是必须的。 22 | 23 | 3 抄，抄完后要看得明白。 24 | 25 | 4 重复敲代码是必须的。 -------------------------------------------------------------------------------- /homework/lesson7/fengkai.md: -------------------------------------------------------------------------------- 1 | 1.编程方法论 2 | a. 3 | 声明 -> 变量 4 | 定义 -> 内存 5 | 赋值 -> 变量 6 | 7 | b. 8 | 顺序 9 | 选择（分支） if ... 10 | 循环 for 、while ... 11 | 12 | c. 13 | 封装; 14 | 调用服务,使用黑箱进行快速学习，适用初阶、中阶; 15 | 16 | d. 17 | 编程世界里有一种机制，把不相关或低相关度的两件或者多件事产生联系; 18 | 19 | e. 20 | 模仿是最好的初级训练 21 | 22 | f. 23 | 对于编程语言的理解方法：把一句话拆成若干个单词，拿每个单词去执行，然后组合起来，整句话也就理解了；机器语言也是语言。 24 | 下断点 ／ console.log 25 | 26 | g. 27 | 在项目中成长 28 | 29 | h. 30 | 编程的过程就是把数据传来传去 31 | 32 | i. 33 | 减法比加法好 34 | 35 | j. 36 | 好的程序员 = [写文档, 项目管理, PPT, 简洁的代码, ... ] 37 | 38 | 39 | 2. 作业地址： 40 | 个人 41 | https://fengkaiwater.github.io/myPage/indexHeart.html 42 | 团队 43 | https://fengkaiwater.github.io/Beijing-Olympics/ -------------------------------------------------------------------------------- /homework/lesson7/hanwei.md: -------------------------------------------------------------------------------- 1 | ### 主页网址 2 | 3 | https://freedomsky11.github.io/JScouser-homework-7/ 4 | 5 | ### 代码网址 6 | 7 | https://github.com/freedomsky11/JScouser-homework-7 -------------------------------------------------------------------------------- /homework/lesson7/huangBiLing.md: -------------------------------------------------------------------------------- 1 | 2 | ## 项目地址： 3 | [https://github.com/ifoundu/ifoundu.github.io](https://github.com/ifoundu/ifoundu.github.io) 4 | 5 | ## 网页地址： 6 | [ifoundu.github.io](https://ifoundu.github.io) 7 | 8 | Getting into a new world ~ :heart: 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /homework/lesson7/lingxiao.md: -------------------------------------------------------------------------------- 1 | # 凌晓的第七次作业 2 | 3 | [静态网页地址](https://lydialing.github.io/JSlearning/) 4 | 5 | [项目地址](https://github.com/LydiaLing/my-getting-started-with-javascript/tree/master/homework/lesson7) 6 | 7 | 这次作业在讲bootstrap之前就完成了，但是本地json文件到html传输是采用的“复制-粘贴”，就想着怎么样能够实现自动获取，整了两个小时没搞定，就去休息了，后面停了bootstrap的课程，又觉得自己的页面太简单了，想把页面布置的华丽一点，可觉得内容好多啊，内心充满深深地焦虑...然后一直焦虑着，然后看着好多同学的作业，把我能想到的都实现了，我没有想到的也实现了，然后我还是很焦虑，然后就没有然后了... 8 | 9 | 一直拖到今天，想着一口吃不成大胖子，还是一步一步来吧，想太多没用，还是要去做...所以先把作业完成，后面再优化吧... 10 | 11 | -------------------------------------------------------------------------------- /homework/lesson7/lipeng.md: -------------------------------------------------------------------------------- 1 | 这是李朋的第7次作业. 2 | 3 | https://5haydn.github.io/JS-Startup/ 4 | 5 | 6 | 7 | **技术要点：** 8 | 9 | 1. json数据放在 dataEngin.js里了。 10 | 2. dataEngine.js, 放在public 文件夹下面，与vue.min.js 一同在 index.html 的 `` 引用。 11 | 3. 参考老师的文档：[《函数 - 定义完就执行》](https://github.com/xugy0926/getting-started-with-javascript/blob/master/topics/%E5%87%BD%E6%95%B0%20-%20%E5%AE%9A%E4%B9%89%E5%AE%8C%E5%B0%B1%E6%89%A7%E8%A1%8C.md) 12 | 13 | -------------------------------------------------------------------------------- /homework/lesson7/liujun.md: -------------------------------------------------------------------------------- 1 | JavaScript编程入门7课作业 2 | 3 | 网页地址: https://liujun009.github.io/liujun/ 4 | 5 | 项目地址：https://github.com/liujun009/liujun 6 | 7 | 对于自己的作业还有许多不满意的地方，比如：心里话是粘贴过去的，代码因此显得很繁琐，后来要学会更高级一点的方法。 8 | 作业由于自己的原因，落后了许多，我会一点一点的赶上的。 9 | -------------------------------------------------------------------------------- /homework/lesson7/liuliyuan.md: -------------------------------------------------------------------------------- 1 | 刘丽媛的第七次作业 2 | 3 | 网页请戳： 项目地址：[https://zjutszl.github.io/Vue_word/](https://zjutszl.github.io/Vue_word/) 4 | 5 | > 仓库地址：[https://github.com/zjutszl/Vue_word](https://github.com/zjutszl/Vue_word) 6 | 7 | 这次的作业工程庞大，花了很多时间才完成。期间踩了不少坑。找时间把爬坑的经验传到仓库里。 -------------------------------------------------------------------------------- /homework/lesson7/wangwei.md: -------------------------------------------------------------------------------- 1 | ## 王炜wayneWong(新生大学:朱春雷,我老婆)作业项目地址 2 | > [项目地址:https://github.com/lightww/words-collection-lesson7-homework](https://github.com/lightww/words-collection-lesson7-homework) 3 | 4 | > [主页地址:https://lightww.github.io/words-collection-lesson7-homework/index.html](https://lightww.github.io/words-collection-lesson7-homework/index.html) 5 | 6 | 7 | ### 问题: 8 | 有的文件名称,内容好像没有问题,怎么也扫不出来,属于err了呢. 9 | 比如 我自己的 json文件 **wayneWong.json** 内容如下: 10 | 11 | ``` 12 | { 13 | "avatar": "https://raw.githubusercontent.com/wiki/lightww/words-from-the-heart/avatar.png", 14 | "name": "wayneWong 王炜", 15 | "words": "之前学过一点 html和css， 还比较好理解， 16 | 但是JS 就更偏向于 编程和代码了，所以想和名师系统的学一下" 17 | 18 | } 19 | ``` 20 | 21 | 这个文件就没有扫出来,写入了 **error_data.json** 文件中. 还有好多文件,看着都正常的,也写入了 **error_data.json** 的文件中. 22 | -------------------------------------------------------------------------------- /homework/lesson7/wengguihua.md: -------------------------------------------------------------------------------- 1 | ##布置的网站 2 | https://fentilaoniu.github.io/personal-web/. 3 | 4 | ##存在的问题 5 | 1.将心里话汇总到json文件的过程中有个疑问：引入的第三方库jsonfile应该放置在哪一级目录文件夹中呢？做作业的时候我把它发在当前目录文件夹中了，不知道如果放在其它地方可不可以？ 6 | 2.把最终得到的json文件的内容反映到html上时，刚开始都不懂的怎么做，后来通过对比老师的例子和同学们的作业（主要是luoruijun和lipeng），以及后续课程的学习，大概照着老师的例子画了一下葫芦。期间，在应用函数定义完就执行的知识点时，最后一行忘了赋值，导致出来的整个网页没有心里话。在这个坑里折腾了大半个小时才爬了出来。对于页面的渲染，自己还没有去研究，后面自己要好好在看看这方面的内容，争取让网页更加丰富多彩。 7 | 8 | ##感谢老师辛勤付出，收到老师的点评还是很开心的。 -------------------------------------------------------------------------------- /homework/lesson7/wenyunxin.md: -------------------------------------------------------------------------------- 1 | ## 作業部署主頁 2 | 3 | [溫云新主頁](https://wenyunxin.github.io/my_page/) 4 | 5 | ## 第七節課作業 6 | 這週學習的是node.js瀏覽器環境的第三方庫vue。vue解決的是前端數據綁定的一大痛點。掌握好效率杠杠的。 7 | 8 | ## 作業流程反思 9 | 這次作業首先是對數據的讀取與寫入一個json文件中。在上次的讀取文件名的作業里我沒解決好異步的問題，導致作業沒有按照自己的所想來實現。 10 | 11 | 這次的作業是一次小項目的完整流程。收集數據展現在前端。這次的作業主要卡在了try...catch...那裡。還是基礎知識點不夠扎牢的緣故。 12 | 13 | 作業網頁部署使用的是semantic ui的框架。 -------------------------------------------------------------------------------- /homework/lesson7/wukuipin.md: -------------------------------------------------------------------------------- 1 | ## 周学习总结 2 | 这是上周学习第七课的学习总结 3 | 4 | ### 碰到的问题 5 | 本地制作的网页引用了本地的json文件，js代码一直报错，就为这个费了好两天时间。不过想起上课的时候老师说过，浏览器环境无法访问本地文件。于是仔细查看报错内容，果真这样： 6 | ![](https://ws1.sinaimg.cn/large/006tNc79gy1fj929yz9lkj30yn06lmxc.jpg) 7 | 那怎么办呢？提示里说用https这种超文本传输安全协议的文件链接地址，那就要么做用一个本地虚拟服务。后来只是先项目上传到github仓库，在打开部署的网页的时候，居然有数据了，所有人的心里话都在里面。顿时发现自己好笨，哈哈哈~ (/掩面哭) 8 | 9 | ### 重新认识代码 10 | 之前写过一些代码，不过主要是制作网页之类的，而这次学习让我知道如何用代码处理本地文件，原来可以用这么少的代码实现批量处理很多重复的工作。这认知上的提升，比学会一两个小技巧重要多了。 11 | 12 | 在写完数据整合的脚本之后，就花不少时间去查资料，看看如何实现前端引用json的数据，一心还想着引用本地json文件（明明老师说过此路不通了）。在微信群里发现有同学在不断探索fs还能用来做些什么，比如 @CaoZhens 同学，他在《提高代码兼容性&可读性的操作实践》中讲述自己探索fs的思路，非常值得自己学习。 13 | 14 | ### 第七课的作品 15 | 小组里很多同学学习的进度不一样，一直鼓励所有的组员在有问题都可以发到群里来寻求帮助。 16 | 这是我的作品链接：https://antarts.github.io/Study_Note/ 17 | -------------------------------------------------------------------------------- /homework/lesson7/yangtieming.md: -------------------------------------------------------------------------------- 1 | #### 部署好的网页： [Terry's JS web](https://terryyang88818.github.io/ytmweb/) 2 | 3 | 4 | ### 学习感悟 5 | 由于这最近工作忙，好不容易完成了作业。还没时间好好拓展阅读Vue，先把作业交了吧，很是抱歉。因为徐老师很用心的在教授大家学习编程的思维和方法，都不忍心不去完成作业。 6 | 7 | 我没有详细研读Vue,但是给我的感觉是： 8 | >
9 | {{ message }} 10 |
11 | 12 | 以上这部分像一个搭建好的房屋框架。 13 | 14 | > var app = new Vue({ 15 | el: '#app', 16 | data: { 17 | message: 'Hello Vue!' 18 | } 19 | }) 20 | 21 | 以上这部分像是房屋的装修。 22 | 23 | **一个建好并装修好的房子，装修风格可以随意改，但是房屋框架最好不要随便动。** 24 | 我们可以通过不断的改变装修风格，来实现不同的生活体验。这比每次拆房子容易。不知道这样理解对不对？ 25 | 26 | 本次课程学习已经过去三分之二，跟着徐老师学习了基本的JS知识。但是在整个课程中包含了学习编程的一种思维。这是一个小白自己摸索很难琢磨出来的。所谓授人以鱼不如授人以渔。我想高阳老师授课方式很好的诠释了这句话。即便课程结束，我们也可以沿着老师指引的方向自己走下去。 27 | 28 | 很庆幸自己参加了本次的课程。 29 | -------------------------------------------------------------------------------- /homework/lesson7/yangxuewu.md: -------------------------------------------------------------------------------- 1 | ## 第七次作业 2 | 3 | **GitHub页面** 4 | 5 | [JavaScript练习册](https://simsalyang.github.io/jsBlog/) 6 | 7 | 8 | -------------------------------------------------------------------------------- /homework/lesson7/zhaokaili.md: -------------------------------------------------------------------------------- 1 |  2 | 网页地址 3 | https://luckary.github.io/Lesson7/ 4 | -------------------------------------------------------------------------------- /homework/lesson7/zhaoyinan.md: -------------------------------------------------------------------------------- 1 | 赵一楠第7次课作业： 2 | 3 | 1、准备 4 | 写作业之前，把自己比较模糊的概念整理了一便： 5 | jsonfile是个什么鬼？它是nodeJS运行环境中的第3方库，跟据github相关页面上的介绍“Easy write read/write json files”，可以了解到它简化了json文件的内容读取和写入的复杂、繁琐流程。 6 | 7 | 2、作业 8 | 课上老师并没有靠诉我们如何调用jsonfile的API，而只是教了如何引入jsonfile，不过学了这么多节课，这点自学能力应该是有的，打开github中jsonfile的页面，所有API都写的清清楚楚。 9 | 10 | 把老师在作业描述中的相关说明进行整理： 11 | A. 使用filejson这个库，把同学们的json文件汇总到一个json文件中。 12 | 1）先扫出所有的文件名。 13 | 2）过滤掉非json的名字，得出一个结果全部是json的文件名。 14 | 3）利用jsonfile的方法循环读取内容到一个json的数组变量中。 15 | 4）将内容写入到一个json文件中。 16 | B. 用vue实现一个html，把json文件的内容展示出来。 17 | 1）把最终得到的json文件的内容反映到html上，请参考github_index/index.html 18 | 2）修饰一下你的html效果。 19 | 3） 部署到你github项目的页面上。 20 | 21 | 按照上述步骤一步一步的实施，经过多番调试，终于成功，最终创建的人个页面的网址如下： 22 | 23 | https://zhaoyn7.github.io/My-first-webpage/ -------------------------------------------------------------------------------- /homework/lesson9/dengxy0907.md: -------------------------------------------------------------------------------- 1 | ### 静态网页 2 | > https://dengxy0907.github.io/JSlesson9/ 3 | ### 项目地址 4 | > https://github.com/dengxy0907/JSlesson9 5 | 6 | ### 过程 7 | > 依旧是最小可用品，axios我用postman试了get，不知道该怎么说，课程的话还要再看看，这几天感觉主要要解决的是Vue。 8 | axios的链式结构我没有遇到error，response下倒是修改了一些，可能受到之前PHP的
的影响,一直沉迷于form和Vue的挂钩，但是一直没有试验出来，这次的Vue钩子挂的的有点牵强，但是应该算是跟着我的思路走的。axios的response的反馈还有点小数据报错还没有修改 9 | ### 心得 10 | > 时间的问题就不多说了，犀牛书什么的看的不多，所以依旧没办法用行话描述，这点之后要补起.我认为这个是我目前最重要的事情。 11 | 12 | > 参考了挺多同学的作业，自己和他们的差距很明显，自己的学习方式有挺多问题，需要自己去改变。 13 | 14 | > 最初是因为笑来想学编程，后来发现我敲代码的时候特别舒服，自己大学课程之后有很多是和技术有关系的，还是挺开心的。 15 | 16 | > 很幸运报了这门课程，学到的不仅仅是编程 17 | ### 新的开始 18 | > 我先补完课再啃犀牛书，新的起点，出发！ 19 | 20 | -------------------------------------------------------------------------------- /homework/lesson9/fangqingyang.md: -------------------------------------------------------------------------------- 1 | ### 静态页面地址 2 | 3 | ### https://vfongv.github.io/LetMeTry/ 4 | 5 | ### 项目地址 6 | 7 | ### https://github.com/vFONGv/LetMeTry 8 | 9 | ### 要解决的问题 10 | 11 | * 网页加载太慢 12 | 13 | * 做一个弹出窗口当点击“我对老师有话讲的时候”就弹出来 14 | 15 | * 输入完内容后可以清空 16 | 17 | ​ 18 | 19 | ### 体会 20 | 21 | 1 如果找不出自己的问题，试试把别人正确的代码拿过来，将自己的代码，一段一段的复制黏贴过去，看看哪里出了问题。（可能会有更好的方法） 22 | 23 | 2 多看群上消息，打鸡血，涨知识 24 | 25 | 3 机器说错了，就是错了，老老实实的找错误去。 26 | 27 | 4 最惨的情况是机器说错了，自己没有找到错误的时候，这时候需要走走。 -------------------------------------------------------------------------------- /homework/lesson9/guowei.md: -------------------------------------------------------------------------------- 1 | # JS小白入门不放弃 homework_lesson9 2 | 3 | ### 作业提交 4 | 项目地址：https://github.com/Wei02320/words_collection 5 | 6 | 网站地址：https://wei02320.github.io/words_collection/ 7 | 8 | ### 思考 9 | 其实答案老师基本都写好了，我们只是需要仔细看文档，理解axios的用法，然后照搬进来调试一下即可。 10 | 11 | 但显然有同学比我做得更好，我这样算是取巧偷懒。世界上没有白走的路，明天白天复习一下布局，好好装饰一下网站。 12 | -------------------------------------------------------------------------------- /homework/lesson9/liujun.md: -------------------------------------------------------------------------------- 1 | JavaScript编程入门9课作业 2 | 3 | 网页地址: https://liujun009.github.io/liujun/ 4 | 5 | 项目地址：https://github.com/liujun009/liujun 6 | 7 | 8 | 过程中踩了好多坑，不过都过来了。我发现，有时候不能太纠结，太着急。 9 | 有些不明白的地方，放那儿俩小时，再回来就找到方法了。 10 | 11 | 12 | -------------------------------------------------------------------------------- /homework/lesson9/wayne.md: -------------------------------------------------------------------------------- 1 | [代码地址](https://github.com/lightww/words-from-wayne) 2 | 3 | 就根据老师的模板代码 改了下 :) 4 | -------------------------------------------------------------------------------- /homework/lesson9/yammy.md: -------------------------------------------------------------------------------- 1 | ## 部署好的静态网页 2 | [静态页面](https://yammmy.github.io/post-words/) 3 | [代码地址](https://github.com/Yammmy/post-words/) 4 | 5 | 参考老师的代码，修改成使用填写表单的方式来发送想说的话 6 | 7 | ## 作业新得 8 | 起初调试代码，需要不断的测试，我有点担心测试多了会不会刷屏[心里话页面](https://js.xinshengdaxue.com/sayToTeacher)，为此我还故意先设置一个任意字符作为新大账号，酱紫返回的response状态 code 就是错误代号2。 9 | 10 | 后来代码写的差不多，有信心真实测试才发现，真是想多了：如果同一个新大账号 post 多次数据，后一次 post 出去的数据会覆盖之前的数据。 11 | 12 | 关于这次作业，我的思路是：既然axios能发出特定字段的 post 请求，如果想要使用表单的方式发送，只需要使用 js 代码抓取表单 submit 之后的字段并赋值给 post 的对象字段就可以了。 13 | 14 | 经过一段 Google，成功找到抓取表单字段的方法。在配合 bootstrap 的表单美化，成功解决问题。 15 | 16 | 还在考虑更好的方法中，先交一个初版的作业。 -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1 3 | } 4 | -------------------------------------------------------------------------------- /public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /public/libs/bootstrap-3.3.7-dist/js/npm.js: -------------------------------------------------------------------------------- 1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment. 2 | require('../../js/transition.js') 3 | require('../../js/alert.js') 4 | require('../../js/button.js') 5 | require('../../js/carousel.js') 6 | require('../../js/collapse.js') 7 | require('../../js/dropdown.js') 8 | require('../../js/modal.js') 9 | require('../../js/tooltip.js') 10 | require('../../js/popover.js') 11 | require('../../js/scrollspy.js') 12 | require('../../js/tab.js') 13 | require('../../js/affix.js') -------------------------------------------------------------------------------- /script/clean.js: -------------------------------------------------------------------------------- 1 | import { cleanDir } from './fs'; 2 | 3 | function clean() { 4 | return Promise.all([ 5 | cleanDir('result/*', { 6 | nosort: true, 7 | dot: true, 8 | ignore: ['result/readme.md'], 9 | }), 10 | ]); 11 | } 12 | 13 | export default clean; 14 | -------------------------------------------------------------------------------- /script/scan.js: -------------------------------------------------------------------------------- 1 | import fse from 'fs-extra'; 2 | 3 | async function scan(path) { 4 | let files = await fse.readdir(path); 5 | return files; 6 | } 7 | 8 | export default scan; -------------------------------------------------------------------------------- /script/teams.md: -------------------------------------------------------------------------------- 1 | #### 团队 2 | 1. 想组建团队一起学习一起做作业一起监督的请@我。 3 | 2. 自行去询问各团队是否满员。已经满员的团队告知我一下，我给你打上满员的tag。 4 | 3. 团队人数：5-10人。 5 | 6 | #### 团队列表 7 | 1. 何伟团队（满员） 8 | 2. 吴魁拼团队 9 | 3. 厦门队 - 陈扬帆 10 | 4. 后起之秀队 - 姜琳 (满员) 11 | 5. 成长幼稚园队- 李想（满员） 12 | 6. 妈妈帮队 - 刘娟娟(李朋是荣誉奶爸) 13 | 7. 突击队 - 小超哥 14 | 8. 志翀小分队（满员） 15 | 9. 董利利小队（满员） 16 | 10. 火力全开队 - 黄家树 （满员） 17 | 11. 夜猫队 - 瑞瑞瑞（满员） 18 | 12. 徐老师带我打通任动二脉队 - 李朋 19 | 13. 跑男队 - 杨学武 20 | 14. 菜鸟战队 - 涂益浪（满员） 21 | 15. 二氧化钛队 - 张高阳（满员） 22 | 16. 北京奧林匹斯隊 - 冯凯 23 | 17. 数据分析团队 - 郑承演 -------------------------------------------------------------------------------- /script/updateTeam.js: -------------------------------------------------------------------------------- 1 | import scan from './scan'; 2 | import { readFile } from './fs'; 3 | import request from 'superagent'; 4 | 5 | var host = process.env.host || 'localhost:3001'; 6 | 7 | const filePath = './teams.md'; 8 | 9 | async function start() { 10 | try { 11 | let data = await readFile(filePath); 12 | 13 | let result = await request 14 | .put(`${host}/api/v1/learnJS/course/1/teams/`) 15 | .send({teamInfo: data}) // sends a JSON post body 16 | .set('X-API-Key', 'foobar') 17 | .set('Accept', 'application/json') 18 | console.log(result.text); 19 | } catch (err) { 20 | console.log(err); 21 | } 22 | } 23 | 24 | export default start; -------------------------------------------------------------------------------- /study/lesson10/first-web-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "first-web-app", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "node ./bin/www" 7 | }, 8 | "dependencies": { 9 | "body-parser": "~1.17.1", 10 | "cookie-parser": "~1.4.3", 11 | "debug": "~2.6.3", 12 | "ejs": "~2.5.6", 13 | "express": "~4.15.2", 14 | "morgan": "~1.8.1", 15 | "serve-favicon": "~2.4.2" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /study/lesson10/first-web-app/public/style.css: -------------------------------------------------------------------------------- 1 | .main-header { 2 | padding-top: 60px; 3 | padding-bottom: 60px; 4 | margin-bottom: 30px; 5 | font-size: 24px; 6 | text-align: left; 7 | background-color: #6f5499; 8 | } 9 | 10 | .main-header h1 { 11 | margin-top: 0; 12 | color: #fff; 13 | } 14 | 15 | .words-pannel { 16 | margin-top: 10px; 17 | } 18 | 19 | .avatar { 20 | height: 48px; 21 | width: 48px; 22 | display: inline-block; 23 | overflow: hidden; 24 | vertical-align: middle; 25 | border-radius: 10px; 26 | float: left; 27 | margin-right: 18px; 28 | cursor: default; 29 | } 30 | -------------------------------------------------------------------------------- /study/lesson10/first-web-app/public/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 50px; 3 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 4 | } 5 | 6 | a { 7 | color: #00B7FF; 8 | } 9 | -------------------------------------------------------------------------------- /study/lesson10/first-web-app/routes/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET home page. */ 5 | router.get('/', function(req, res, next) { 6 | res.render('index', { title: 'Express' }); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /study/lesson10/first-web-app/routes/users.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET users listing. */ 5 | router.get('/', function(req, res, next) { 6 | res.send('respond with a resource'); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /study/lesson10/first-web-app/views/error.ejs: -------------------------------------------------------------------------------- 1 |

<%= message %>

2 |

<%= error.status %>

3 | 
<%= error.stack %>
4 | -------------------------------------------------------------------------------- /study/lesson10/github_index/public/style.css: -------------------------------------------------------------------------------- 1 | .main-header { 2 | padding-top: 60px; 3 | padding-bottom: 60px; 4 | margin-bottom: 30px; 5 | font-size: 24px; 6 | text-align: left; 7 | background-color: #6f5499; 8 | } 9 | 10 | .main-header h1 { 11 | margin-top: 0; 12 | color: #fff; 13 | } 14 | 15 | .words-pannel { 16 | margin-top: 10px; 17 | } 18 | 19 | .avatar { 20 | height: 48px; 21 | width: 48px; 22 | display: inline-block; 23 | overflow: hidden; 24 | vertical-align: middle; 25 | border-radius: 10px; 26 | float: left; 27 | margin-right: 18px; 28 | cursor: default; 29 | } 30 | -------------------------------------------------------------------------------- /study/lesson2/github_index/public/style.css: -------------------------------------------------------------------------------- 1 | .main-header { 2 | padding-top: 60px; 3 | padding-bottom: 60px; 4 | margin-bottom: 30px; 5 | font-size: 24px; 6 | text-align: left; 7 | background-color: #6f5499; 8 | } 9 | 10 | .main-header h1 { 11 | margin-top: 0; 12 | color: #fff; 13 | } 14 | -------------------------------------------------------------------------------- /study/lesson2/sample1.html: -------------------------------------------------------------------------------- 1 |

这是一个html例子,html文件的后缀是html

2 |

虽然我没有html,head,body标签，但是浏览器再解释的时候会自动帮我补全它们。

-------------------------------------------------------------------------------- /study/lesson2/sample2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

这是html例子

5 |

这个例子是一个完整的结构，包涵了html、head和body标签

6 | 7 | -------------------------------------------------------------------------------- /study/lesson2/sample3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

这是html例子

5 |

我包含script标签

6 | 7 | 8 | -------------------------------------------------------------------------------- /study/lesson4/object.js: -------------------------------------------------------------------------------- 1 | // 用直接量的方式创建对象person1 2 | var person1 = { 3 | name: 'xiaoming' //注意：对象属性name没有引号 4 | }; 5 | 6 | // 用直接量的方式创建对象person2(带双引号的属性结构使得该对象更像json格式) 7 | // 不推荐把对象属性带有引号 8 | var person2 = { 9 | "name": "xiaoming" //【不推荐】注意：对象属性name有引号 10 | }; 11 | 12 | console.log(typeof person1); 13 | console.log(typeof person2); 14 | 15 | console.log(person1.name); 16 | console.log(person2.name); 17 | 18 | console.log(person1['name']); 19 | console.log(person2['name']); 20 | -------------------------------------------------------------------------------- /study/lesson4/readme.md: -------------------------------------------------------------------------------- 1 | ## lesson4 sample代码使用方式 2 | 3 | #### 用函数来构建human信息 4 | 5 | 1. build_a_human.js // 将构建person信息封装在函数内 6 | 7 | #### 两种模拟士兵报数的函数操作方式 8 | 9 | 1. sound_off.js // 函数的顺序调用 10 | 2. sound_off_2.js // 函数的嵌套调用 11 | 3. sound_off_3.js // 调用对象方法 12 | 13 | #### 厨房工作流 14 | 15 | 1. kitchen_workflow.js 16 | 17 | #### 创建对象的注意点 18 | 19 | 1. object.js 20 | 21 | #### 用vue构建动态数据 22 | 23 | 1. vue/index.html 24 | -------------------------------------------------------------------------------- /study/lesson4/sound_off.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 模拟报数过程 - 顺序调用 3 | * 4 | * 函数soldierA()代表士兵A, 依次类推。 5 | * startSoundOff()函数是开始报数的处理函数。 6 | */ 7 | 8 | function soldierA() { 9 | console.log("1到"); 10 | } 11 | 12 | function soldierB() { 13 | console.log("2到"); 14 | } 15 | 16 | function soldierC() { 17 | console.log("3到"); 18 | } 19 | 20 | function soldierD() { 21 | console.log("4到"); 22 | } 23 | 24 | function soldierE() { 25 | console.log("5到"); 26 | } 27 | 28 | // 按顺序调用士兵函数开始报数 29 | // 这是一种顺序调用函数的方式，由startSoundOff内部设计好调用的执行流程 30 | function startSoundOff() { 31 | soldierA(); 32 | soldierB(); 33 | soldierC(); 34 | soldierD(); 35 | soldierE(); 36 | } 37 | 38 | // 执行报数函数startSoundOff() 39 | 40 | startSoundOff(); 41 | -------------------------------------------------------------------------------- /study/lesson4/sound_off_2.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 模拟报数过程 - 嵌套调用 3 | * 4 | * 函数soldierA()代表士兵A, 以此类推。 5 | * startSoundOff()函数是开始报数的处理函数。每个士兵报完数后告诉下一个士兵继续报数。 6 | * 这是函数嵌套的调用方式。 7 | */ 8 | 9 | function soldierA() { 10 | console.log('1到'); 11 | soldierB(); 12 | } 13 | 14 | function soldierB() { 15 | console.log('2到'); 16 | soldierC(); 17 | } 18 | 19 | function soldierC() { 20 | console.log('3到'); 21 | soldierD(); 22 | } 23 | 24 | function soldierD() { 25 | console.log('4到'); 26 | soldierE(); 27 | } 28 | 29 | function soldierE() { 30 | console.log('5到'); 31 | } 32 | 33 | // startSoundOff()只调用排头士兵执行开始报数 34 | function startSoundOff() { 35 | soldierA(); 36 | } 37 | 38 | // 执行报数函数startSoundOff() 39 | startSoundOff(); 40 | -------------------------------------------------------------------------------- /study/lesson5/async_function.js: -------------------------------------------------------------------------------- 1 | // 模拟异步处理的手法 2 | 3 | // 定义一个函数，函数名为callback 4 | function callback() { 5 | console.log('我终于被调用了'); 6 | } 7 | 8 | // 5秒钟后调用callback函数 9 | setTimeout(callback, 5000); 10 | -------------------------------------------------------------------------------- /study/lesson5/flight_schedule_1.js: -------------------------------------------------------------------------------- 1 | function checkFlightSchedule() { 2 | console.log('开始查航班信息'); 3 | 4 | // 模拟构建航班的时间信息 5 | var scheduleInfo = { 6 | start: '8/23 8:00', 7 | end: '8/23 10:30', 8 | from: 'beijing', 9 | to: 'hangzhou' 10 | }; 11 | 12 | return scheduleInfo.start; 13 | } 14 | 15 | //--------------------------------------- 16 | 17 | // 调用立即函数checkFlightSchedule 18 | var startTime = checkFlightSchedule(); 19 | console.log(startTime); 20 | -------------------------------------------------------------------------------- /study/lesson5/flight_schedule_2.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 间接回调处理案例 3 | */ 4 | 5 | // checkFlightSchedule函数的定义者设计了一个通过回调给结果的方案。 6 | // 当函数处理完后，通过调用者设置过来的回调执行输出 7 | function checkFlightSchedule(callback) { 8 | console.log('开始查航班信息'); 9 | 10 | // 模拟构建航班的时间信息 11 | var scheduleInfo = { 12 | start: '8/23 8:00', 13 | end: '8/23 10:30', 14 | from: 'beijing', 15 | to: 'hangzhou' 16 | }; 17 | 18 | callback(scheduleInfo.start); 19 | } 20 | 21 | //--------------------------------------- 22 | function callback(startTime) { 23 | console.log(startTime); 24 | } 25 | 26 | // 调用函数checkFlightSchedule，并塞一个回调函数以获取结果 27 | checkFlightSchedule(callback); 28 | -------------------------------------------------------------------------------- /study/lesson5/flight_schedule_3.js: -------------------------------------------------------------------------------- 1 | function checkFlightSchedule(callback) { 2 | console.log('开始查航班信息'); 3 | 4 | setTimeout(function() { 5 | // 模拟构建航班的时间信息 6 | var scheduleInfo = { 7 | start: '8/23 8:00', 8 | end: '8/23 10:30', 9 | from: 'beijing', 10 | to: 'hangzhou' 11 | }; 12 | 13 | callback(scheduleInfo.start); 14 | }, 5000); 15 | } 16 | 17 | //--------------------------------------- 18 | function callback(startTime) { 19 | console.log('通过反馈通道获得了信息'); 20 | console.log(startTime); 21 | } 22 | 23 | // 执行查询函数 24 | checkFlightSchedule(callback); 25 | -------------------------------------------------------------------------------- /study/lesson5/indirect.js: -------------------------------------------------------------------------------- 1 | // 定义函数callback 2 | function callback() { 3 | console.log('我跑完了'); 4 | } 5 | 6 | // 定义函数run，run接收一个函数类型的参数，当执行完动作后，调用该函数。 7 | function run(2b) { 8 | console.log('🏃🏃🏃🏃🏃'); 9 | 2b(); 10 | } 11 | 12 | // 调用函数run，并把函数callback当参数传过去 13 | run(callback); -------------------------------------------------------------------------------- /study/lesson5/indirect_call.js: -------------------------------------------------------------------------------- 1 | // 定义函数callback 2 | function callback() { 3 | console.log('我跑完了'); 4 | } 5 | 6 | // 定义函数run，run接收一个函数类型的参数，当执行完动作后，调用该函数。 7 | function run(cb) { 8 | console.log('🏃🏃🏃🏃🏃'); 9 | cb(); 10 | } 11 | 12 | // 调用函数run，并把函数callback当参数传过去 13 | run(callback); 14 | -------------------------------------------------------------------------------- /study/lesson5/readme.md: -------------------------------------------------------------------------------- 1 | ## lesson5 sample代码使用方式 2 | 3 | #### 数据类型的使用 4 | 5 | // 数据格式的基本操作。内附各种数据格式的api链接。 6 | 7 | 1. type_array_sample.js 8 | 2. type_boolean_sample.js 9 | 3. type_number_sample.js 10 | 4. type_object_sample.js 11 | 5. type_string_sample.js 12 | 13 | #### 案例 14 | 15 | 1. indirect_call.js // 最简单的间接返回 16 | 2. async_function.js // 最简单模拟异步的技巧 17 | 3. flight_schedule_1.js // 立即返回案例 18 | 4. flight_schedule_2.js // 间接返回案例 19 | 5. flight_schedule_3.js // 异步处理案例 20 | 6. kitchen_wordflow_async.js // 异步实现一桌酒席 21 | -------------------------------------------------------------------------------- /study/lesson5/type_boolean_sample.js: -------------------------------------------------------------------------------- 1 | var student = false; 2 | 3 | // 虽然student是一个boolean类型的变量，但可以调用toString()方法，并输出string类型的值 4 | console.log(student.toString()); 5 | -------------------------------------------------------------------------------- /study/lesson5/type_number_sample.js: -------------------------------------------------------------------------------- 1 | var age = 18; 2 | 3 | console.log(age); 4 | 5 | // 虽然age是一个number类型的变量，但可以调用toString()方法 6 | console.log(age.toString()); 7 | -------------------------------------------------------------------------------- /study/lesson5/type_string_sample.js: -------------------------------------------------------------------------------- 1 | /* 2 | * String api 3 | * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String 4 | */ 5 | 6 | var name = 'xiaoming'; 7 | 8 | console.log(name); 9 | 10 | // 可以根据游标访问字符串的单个字符 11 | console.log(name[0]); 12 | console.log(name[1]); 13 | console.log(name[2]); 14 | console.log(name[3]); 15 | console.log(name[4]); 16 | console.log(name[5]); 17 | console.log(name[6]); 18 | console.log(name[7]); 19 | 20 | // 字符串有长度属性，通过循环访问单个字符 21 | for (var i = 0; i < name.length; i++) { 22 | console.log(name[i]); 23 | } 24 | 25 | // 通过游标切割字符串 26 | console.log(name.substring(0, 4)); 27 | 28 | /* 29 | * String api 30 | * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String 31 | */ 32 | -------------------------------------------------------------------------------- /study/lesson6/scan_files_async.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 异步方案 3 | * 4 | * 扫描某个文件夹的所有内容 5 | */ 6 | 7 | // 引入fs模块 8 | var fs = require('fs'); 9 | 10 | // 定义要查询的目标文件夹。如果你想查lesson2的内容，就修改下面路径字符串。 11 | var dirPathString = '../../homework/lesson1'; 12 | 13 | // ----------------------------------- 14 | // 异步方案 15 | 16 | // 定义一个callback函数，用于接收读取文件夹内容后的结果 17 | function callback(err, files) { 18 | if (err) { 19 | console.log('读取文件失败'); 20 | return; 21 | } 22 | 23 | if (files.length > 0) { 24 | console.log(files); 25 | } else { 26 | console.log('没有找到任何文件'); 27 | } 28 | } 29 | 30 | //调用fs的readdir函数读取所有文件 31 | fs.readdir(dirPathString, callback); 32 | -------------------------------------------------------------------------------- /study/lesson6/scan_files_sync.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 同步方案 3 | * 4 | * 扫描某个文件夹的所有内容 5 | */ 6 | 7 | // 引入fs模块 8 | var fs = require('fs'); 9 | 10 | // 定义要查询的目标文件夹。如果你想查lesson2的内容，就修改下面路径字符串。 11 | var dirPathString = '../../homework/lesson1'; 12 | 13 | // --------------------------------- 14 | // 同步方案 15 | 16 | var files = fs.readdirSync(dirPathString); 17 | console.log(files); 18 | -------------------------------------------------------------------------------- /study/lesson6/write_file_async.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 异步方案 3 | * 4 | * 将内容写入到文件中 5 | */ 6 | 7 | // 引入fs模块 8 | var fs = require('fs'); 9 | 10 | // 定义要写入的文件路径 11 | var filePathString = './write_file_async.txt'; 12 | 13 | // 定义文件内容变量fileContent 14 | var fileContent = 'Hello, JS'; 15 | 16 | // ----------------------------------- 17 | // 异步方案 18 | 19 | // 定义一个callback函数，用于接收写文件的返回结果 20 | function callback(err) { 21 | if (err) { 22 | console.log('写文件失败'); 23 | } else { 24 | console.log('写文件成功'); 25 | } 26 | } 27 | 28 | //调用fs的writeFile函数来写文件 29 | fs.writeFile(filePathString, fileContent, callback); 30 | -------------------------------------------------------------------------------- /study/lesson6/write_file_sync.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 同步方案 3 | * 4 | * 将内容写入到文件中 5 | */ 6 | 7 | // 引入fs模块 8 | var fs = require('fs'); 9 | 10 | // 定义要写入的文件路径 11 | var outputPathString = './write_file_sync.txt'; 12 | 13 | // 定义文件内容变量fileContent 14 | var fileContent = 'Hello, JS'; 15 | 16 | // --------------------------------- 17 | // 同步方案 18 | 19 | //调用fs的writeFileSync函数来写文件 20 | fs.writeFileSync(outputPathString, fileContent); 21 | -------------------------------------------------------------------------------- /study/lesson7/error_data.json: -------------------------------------------------------------------------------- 1 | ["Autumnchou.json","Explorer1982.json","ZhengChao.json","baoguoqiang.json","chenderong.json","cuimeng.json","fanqing.json","feixiguang.json","hucl.json","linchunlong.json","liujuanjuan1984.json","panminxin.json","sunxiaolong.json","wangfanhao.json","wangmeiling.json","wangshasha.json","wayneWong.json","wufan.json","yangyepeng.json","yimiaoli.json","zhangxingzhi.json","zhangxuedong.json","zhuting.json"] 2 | -------------------------------------------------------------------------------- /study/lesson7/github_index/easy_vue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 |

{{ title }}

12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /study/lesson7/github_index/public/style.css: -------------------------------------------------------------------------------- 1 | .main-header { 2 | padding-top: 60px; 3 | padding-bottom: 60px; 4 | margin-bottom: 30px; 5 | font-size: 24px; 6 | text-align: left; 7 | background-color: #6f5499; 8 | } 9 | 10 | .main-header h1 { 11 | margin-top: 0; 12 | color: #fff; 13 | } 14 | 15 | .words-pannel { 16 | margin-top: 10px; 17 | } 18 | 19 | .avatar { 20 | height: 48px; 21 | width: 48px; 22 | display: inline-block; 23 | overflow: hidden; 24 | vertical-align: middle; 25 | border-radius: 10px; 26 | float: left; 27 | margin-right: 18px; 28 | cursor: default; 29 | } 30 | -------------------------------------------------------------------------------- /study/lesson7/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "useJSONFile", 3 | "dependencies": { 4 | "jsonfile": "3.0.1" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /study/lesson7/read_a_json_file.js: -------------------------------------------------------------------------------- 1 | // 引入jsonfile模块 2 | // https://github.com/jprichardson/node-jsonfile 3 | var jsonFile = require('jsonfile'); 4 | 5 | var file = './test_data/data.json'; 6 | jsonFile.readFile(file, function (err, obj) { 7 | if (err) { 8 | console.log(err); 9 | } else { 10 | console.log('read ok.'); 11 | } 12 | }); -------------------------------------------------------------------------------- /study/lesson7/readme.md: -------------------------------------------------------------------------------- 1 | ## lesson7 sample代码使用方式 2 | 3 | #### vue的案例 4 | 5 | github_index 6 | 7 | #### 案例 8 | 9 | // 写一个json文件 10 | 1. write_a_json_file.js 11 | 12 | // 读一个json文件 13 | 2. read_a_json_file.js 14 | 15 | // 刘娟娟的报数想法案例 16 | 3. sound_off.js 17 | -------------------------------------------------------------------------------- /study/lesson7/test_data/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "xugaoyang", 4 | "avatar": "https://ws1.sinaimg.cn/large/006tKfTcgy1fi7s7vo8y0j30hs0hsaay.jpg", 5 | "words": "我想带领大家感受编程语言JavaScript的魅力，与同学们一起成长我感到非常的荣幸" 6 | }, 7 | { 8 | "avatar": "https://avatars0.githubusercontent.com/u/384727?v=4&s=460", 9 | "name": "蓉儿", 10 | "words": "成为屌屌的全栈设计师" 11 | } 12 | ] 13 | -------------------------------------------------------------------------------- /study/lesson7/write_a_json_file.js: -------------------------------------------------------------------------------- 1 | // 引入jsonfile模块 2 | // https://github.com/jprichardson/node-jsonfile 3 | var jsonFile = require('jsonfile'); 4 | 5 | // 定义一个存放json文件的 6 | var file = './test_data/data.json'; 7 | 8 | var testJSONData = [{ 9 | name: 'xugaoyang', 10 | avatar: 'https://ws1.sinaimg.cn/large/006tKfTcgy1fi7s7vo8y0j30hs0hsaay.jpg', 11 | words: '我想带领大家感受编程语言JavaScript的魅力，与同学们一起成长我感到非常的荣幸' 12 | }, { 13 | avatar: "https://avatars0.githubusercontent.com/u/384727?v=4&s=460", 14 | name: "蓉儿", 15 | words: "成为屌屌的全栈设计师" 16 | }]; 17 | 18 | jsonFile.writeFile(file, testJSONData, function (err) { 19 | if (err) { 20 | console.log(err); 21 | } else { 22 | console.log('read ok.'); 23 | } 24 | }); -------------------------------------------------------------------------------- /study/lesson9/chain_function_call.js: -------------------------------------------------------------------------------- 1 | var person = { 2 | jump: function () { 3 | console.log('jump jump'); 4 | return this; 5 | }, 6 | run: function () { 7 | console.log('run run'); 8 | return this; 9 | }, 10 | eat: function () { 11 | console.log('eat eat'); 12 | return this; 13 | } 14 | } 15 | 16 | person.jump().run().eat(); -------------------------------------------------------------------------------- /study/lesson9/github_index/public/style.css: -------------------------------------------------------------------------------- 1 | .main-header { 2 | padding-top: 60px; 3 | padding-bottom: 60px; 4 | margin-bottom: 30px; 5 | font-size: 24px; 6 | text-align: left; 7 | background-color: #6f5499; 8 | } 9 | 10 | .main-header h1 { 11 | margin-top: 0; 12 | color: #fff; 13 | } 14 | 15 | .words-pannel { 16 | margin-top: 10px; 17 | } 18 | 19 | .avatar { 20 | height: 48px; 21 | width: 48px; 22 | display: inline-block; 23 | overflow: hidden; 24 | vertical-align: middle; 25 | border-radius: 10px; 26 | float: left; 27 | margin-right: 18px; 28 | cursor: default; 29 | } 30 | -------------------------------------------------------------------------------- /study/lesson9/readme.md: -------------------------------------------------------------------------------- 1 | ## 第九节课作业 2 | 3 | 【http请求案例文档说明】 4 | https://github.com/xugy0926/getting-started-with-javascript/blob/master/topics/%E4%BA%86%E4%B8%8D%E8%B5%B7%E7%9A%84axios(http).md 5 | 6 | 【作业sample】 7 | 作业的html参考/study/lesson9/github_index 8 | 9 | 【api文档】 10 | https://js.xinshengdaxue.com/api 11 | 12 | 【作业方式】 13 | 14 | 把study/lesson9/github_index的代码拿走，在里面加入post请求，给我发送你的心里话。 15 | post的body里面要带三个参数：name，account，content。name的内容请用和之前交作业时同样的名字。 16 | 17 | 强烈要求：禁止使用postman完成作业！ 18 | -------------------------------------------------------------------------------- /topics/作品征集.md: -------------------------------------------------------------------------------- 1 | ## 作品征集 2 | 3 | 【作品主题】 4 | 5 | 我们毕业了~ 6 | 7 | 【需求列表】 8 | 9 | 1. 在github上创建一个新的项目(要永久保存哟)，并部署你的页面。 10 | 2. 可利用`https://js.xinshengdaxue.com/api`所有开放的接口来获取数据并展示在页面上。 11 | 3. 你也可以做其他定义化的需求。 12 | 4. 如果你觉得自己作品需要更丰富化的数据或功能，又苦于自己没有服务器。那么你可以找我谈谈，或许我可以给你加接口。 13 | 14 | 15 | 【技术要求】 16 | 17 | 1. 用bootstrap做页面框架（你可以自定义样式）。 18 | 2. 用vue来处理数据更新。 19 | 3. 用axios处理http请求(get，post)。 20 | 4. 代码要规范。 21 | 22 | 【参赛形式】 23 | 24 | 可以个人也可以团队 25 | 26 | 【时间】 27 | 28 | 立即生效 ~ 2017/9/14日晚8点 29 | 30 | 【提交方式】 31 | 待定~ 32 | 33 | 【评选】 34 | 35 | 一二三等奖（大奖送京东云三个月服务器使用权） 36 | -------------------------------------------------------------------------------- /topics/匿名函数使用技巧.md: -------------------------------------------------------------------------------- 1 | 以下例子是一个模拟异步处理的手法 2 | 3 | ```javascript 4 | // 定义一个函数，函数名为callback 5 | function callback () { 6 | console.log('我终于被调用了'); 7 | } 8 | 9 | // 5秒钟后调用callback函数 10 | setTimeout(callback, 5000); 11 | ``` 12 | 13 | 流程注解： 14 | 1. 定义了一个函数callback。 15 | 2. 然后调用setTimeout函数，5秒钟后调用callback函数。 16 | 17 | 18 | 其实，我们可以采用匿名函数来简化流程。 19 | 20 | ```javascript 21 | setTimeout(function () { 22 | console.log('我终于被调用了'); 23 | }, 5000); 24 | ``` 25 | 26 | 通过匿名函数的方式带来直接的好处就是，不用去考虑怎么定义函数的命名。提高了写代码的效率。 27 | -------------------------------------------------------------------------------- /topics/相对路径.md: -------------------------------------------------------------------------------- 1 | 在进行文件操作是，不管是读文件还是写文件，都要用到文件路径。 2 | 3 | 比如，你要通过代码读取某个文件夹的文件列表 4 | 5 | 6 | ``` 7 | // 引入fs模块 8 | var fs = require('fs'); 9 | 10 | // 定义要查询的目标文件夹。如果你想查lesson2的内容，就修改下面路径字符串。 11 | var dirPathString = '../../homework/lesson1'; 12 | 13 | var files = fs.readdirSync(dirPathString); 14 | console.log(files); 15 | ``` 16 | 17 | 其中dirPathString使用的是相对路径的方式找到要读取的文件夹。 18 | 19 | `'../../homework/lesson1'`可以描述为：代码js文件的上一级文件夹的再上一级文件夹下的homework文件下的lesson1文件夹。 20 | 21 | `..`就是上一级文件夹 22 | `../..`就是上上级文件夹 23 | 24 | 如果是当前目录怎么办？请使用`./` 25 | -------------------------------------------------------------------------------- /webapp/src/config/index.dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | apiUrl: 'http://localhost:3001/api/v1', 3 | apiUrlGraphql: 'http://localhost:3001/api/graphql' 4 | } -------------------------------------------------------------------------------- /webapp/src/config/index.js: -------------------------------------------------------------------------------- 1 | 2 | const config = process.env.NODE_ENV !== 'production' ? require('./index.dev') : require('./index.pro'); 3 | 4 | module.exports = config; -------------------------------------------------------------------------------- /webapp/src/config/index.pro.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | apiUrl: 'https://js.xinshengdaxue.com/api/v1', 3 | apiUrlGraphql: 'https://js.xinshengdaxue.com/api/graphql' 4 | } -------------------------------------------------------------------------------- /webapp/src/middleware/courseInfo.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash'; 2 | 3 | import { apiUrl } from '../config'; 4 | import { get } from '../request'; 5 | 6 | export default async function(req, res, next) { 7 | try { 8 | let result = await get({ 9 | url: `${apiUrl}/learnJS/course/1/detail` 10 | }); 11 | 12 | _.extend(req.app.locals, result.courseInfo); 13 | } catch (err) { 14 | next(err); 15 | return; 16 | } 17 | 18 | next(); 19 | } 20 | -------------------------------------------------------------------------------- /webapp/src/public/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/webapp/src/public/images/background.jpg -------------------------------------------------------------------------------- /webapp/src/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/webapp/src/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /webapp/src/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/webapp/src/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /webapp/src/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/webapp/src/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /webapp/src/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xugy0926/getting-started-with-javascript/5eb1b97442bac8505c9701b2f5b4ba733290eefa/webapp/src/public/libs/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /webapp/src/public/libs/bootstrap-3.3.7-dist/js/npm.js: -------------------------------------------------------------------------------- 1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment. 2 | require('../../js/transition.js') 3 | require('../../js/alert.js') 4 | require('../../js/button.js') 5 | require('../../js/carousel.js') 6 | require('../../js/collapse.js') 7 | require('../../js/dropdown.js') 8 | require('../../js/modal.js') 9 | require('../../js/tooltip.js') 10 | require('../../js/popover.js') 11 | require('../../js/scrollspy.js') 12 | require('../../js/tab.js') 13 | require('../../js/affix.js') -------------------------------------------------------------------------------- /webapp/src/routes/topics.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import { apiUrl } from '../config'; 3 | import { get } from '../request'; 4 | import MarkdownIt from 'markdown-it'; 5 | 6 | var router = express.Router(); 7 | 8 | var md = new MarkdownIt(); 9 | 10 | /* GET home page. */ 11 | router.get('/', async function(req, res, next) { 12 | try { 13 | let catelogResult = await get({ 14 | url: `${apiUrl}/learnJS/course/1/catelog` 15 | }); 16 | 17 | res.render('topics', { 18 | gitTopicsList: catelogResult.catelog.gitTopicsList, 19 | pptList: catelogResult.catelog.pptList, 20 | topicsList: catelogResult.catelog.topicsList 21 | }); 22 | } catch (err) { 23 | next(err); 24 | } 25 | }); 26 | 27 | module.exports = router; 28 | -------------------------------------------------------------------------------- /webapp/src/routes/words.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import { apiUrl } from '../config'; 3 | import { get } from '../request'; 4 | 5 | var router = express.Router(); 6 | 7 | /* GET words listing. */ 8 | router.get('/', async function(req, res, next) { 9 | try { 10 | let result = await get({ 11 | url: `${apiUrl}/learnJS/course/1/words` 12 | }); 13 | 14 | res.render('words', { 15 | title: '我的心裡話', 16 | words: result.words 17 | }); 18 | } catch (err) { 19 | next(err); 20 | } 21 | }); 22 | 23 | module.exports = router; 24 | -------------------------------------------------------------------------------- /webapp/src/views/error.ejs: -------------------------------------------------------------------------------- 1 |

2 | <%= message %> 3 |

4 |

5 | <%= error.status %> 6 |

7 | 
<%= error.stack %>
-------------------------------------------------------------------------------- /webapp/test/routes_api.test.js: -------------------------------------------------------------------------------- 1 | import request from 'supertest'; 2 | import app from '../src/app.js'; 3 | 4 | describe('POST /api/course/1/info', () => { 5 | it('should return json', async () => { 6 | await request(app).post('/api/course/1/info').expect(200); 7 | }); 8 | }); 9 | 10 | describe('POST /api/catelog/list', () => { 11 | it('should return json', async () => { 12 | await request(app) 13 | .post('/api/catelog/list') 14 | .expect(200); 15 | }); 16 | }); 17 | 18 | describe('POST /api/words/list', () => { 19 | it('should return json', async () => { 20 | await request(app).post('/api/words/list').expect(200); 21 | }); 22 | }); -------------------------------------------------------------------------------- /webapp/test/routes_page.test.js: -------------------------------------------------------------------------------- 1 | import request from 'supertest'; 2 | import app from '../src/app.js'; 3 | 4 | describe('GET /', () => { 5 | it('should render properly', async () => { 6 | await request(app).get('/').expect(200); 7 | }); 8 | }); 9 | 10 | describe('GET /words', () => { 11 | it('should render properly', async () => { 12 | await request(app) 13 | .get('/words') 14 | .expect(200); 15 | }); 16 | }); 17 | 18 | describe('GET /homework', () => { 19 | it('should render properly', async () => { 20 | await request(app) 21 | .get('/homework/1') 22 | .expect(200); 23 | 24 | await request(app) 25 | .get('/homework/2') 26 | .expect(200); 27 | }); 28 | }); --------------------------------------------------------------------------------