华为云ID:hw61163329第三章 揭秘ajax1、同步与异步的概念同步：synchronous异步：asynchronous2、AJAX技术的核心：XMLHttpRequest（XHR）:浏览器通过XMLHttpRequest对象向服务器发送异步请求，从服务器获取数据，返回之后再更新页面，实现异步的刷新页面。♥ 方法：open(method,url,async) 初始化请求的参数send(param) 发送setRequestHeader("Content-type","application/x-www-form-urlencoded")  如果以post方式发送请求，一定要用setRequestHeader设置Content-type♥ 属性：onreadystatechangereadyState  //发送过程中的状态status       //  https请求的状态码responseText  //返回的结果♥ XMLHttpRequest的使用1）创建XMLHttpRequest2）使用open方法，初始化请求参数3）使用send方法，发送请求4）使用onreadystatechange属性，接收返回数据3、跨域请求同源策略：协议名+主机号+端口号，三者都相同为同一个域，只要有一个不同，则为跨域。没有端口号默认为80跨域请求：跨域请求的方法：JSONP、Proxy、iframe、CORS天然可以跨域的标签：script（img、link）第四章 jQuery中的AJAX1、jquery放在页面底部进行导入，不影响页面的渲染速度，否则dom节点还没渲染完就读取页面，容易造成页面阻塞。//在layout.pug文件中用pug语法进行书写script(src='/javascripts/jquery.js')业务逻辑部分2、get和post方法（1） get方法♥ $.get(url,data,callback,type)♥ url是请求的接口地址♥ data是请求的参数♥ callback是请求成功时的回调函数♥ type是请求返回数据的格式♥ 除了url，其它三个参数如果没有可以省略注意的地方：♥ 请求参数的格式可以是json对象，也可以是字符串♥ 返回的数据格式可以是：JSON、HTML、Script、XML、Text等。（2） post方法♥ $.post(url,data,callback,type)♥ url是请求的接口地址♥ data是请求的参数♥ callback是请求成功时的回调函数♥ type是请求返回数据的格式♥ 除了url，其它三个参数如果没有可以省略注意的地方：♥ post请求发出去的时候请求参数是放在请求体中（3）get和post的区别♥ GET在浏览器回退时是无害的，而POST会再次提交请求。♥ GET产生的URL地址可以被Bookmark，而POST不可以。♥  GET请求会被浏览器主动cache，而POST不会，除非手动设置。♥ GET请求只能进行url编码，而POST支持多种编码方式。♥ GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。♥ GET请求在URL中传送的参数是有长度限制的，而POST么有。♥ 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。♥ GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。♥ GET参数通过URL传递，POST放在Request body中。3、ajax方法（1）ajax方法语法格式♥ $ajax(option)♥ option是JSON格式的配置参数，用于设置ajax请求（2）常用配置♥ url:发送请求的地址♥ type：请求方式（get 或post等）♥ data:请求参数♥ dataType:返回的数据类型（json、html、xml等）♥ success：请求成功后的回调函数♥ error：请求失败后的回调函数♥ complete：请求完成后的回调函数（不论成功与否都会执行）（3）布尔类型的配置async：是否为异步请求cache：是否进行缓存（主要针对get请求）（4）容易被忽视的配置项timeout：请求超时时间（毫秒）

华为云ID: hw61163329第七章 初识AJAX1、ajax：异步的javascript和XML♥大幅提升用户体验♥能够减轻服务器端的压力♥异步加载♥局部更新♥前端通过AJAX技术从后端服务器中获取数据2、网络通信原理♥ 网络架构数据链路层→→交换机网络层→→路由器传输层→→TCP&UDP网络接口层：物理层+链路层♥ 数据传输过程♥ http协议http协议特点：无状态协议，不会建立持久连接。dns域名解析服务器：域名和IP的对应关系服务器和客户端三次握手建立连接2、Node.js服务node -v 查看Node.js版本npm -v  查看包管理工具版本3、Koa框架koa是Node.js的下一代Web框架，代码量非常少，通过中间件实现框架的扩展全局安装koa脚手架：npm install koa-generator -g或cnpm install koa-generator -g使用koa2创建web服务器：步骤：1） koa2 ajax          2）cd ajax          3） npm install          4）npm start 启动项目bin:项目启动路径node_modules:依赖包public :静态文件routes：路由目录views: 视图，页面，pug为模板引擎app.js:项目入口package.json:项目信息

中奖啦，开心

华为云ID:hw61163329第四章 数组与函数入门1、数组概念概念：数组可以把一组相关的数据一起存放，并提供方便的访问方式。数组是一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任           意类型的元素，数组是一种将一组数据存储在单个变量名下的优雅方式。数组中可以存放任意类型的数据元素。数组创建： 1）通过new关键字 var arr = new Array();2）通过数组字面量创建数组 var arr =[];获取数组元素：数组名[下标]；数组元素的下标（索引号，从0开始）数组遍历：通过for循环，把数组中每个元素从头到尾都访问一遍。数组长度：数组名.length数组转字符串：str + =arr[i] +sep;数组新增元素：❤ 通过修改length长度增加；❤ 通过修改索引号增加；var newArr =[];newArr[newArr.length] = newData;筛选数组元素数组翻转：冒泡排序：外层循环次数：i= arr.length-1;内层循环次数：arr.length-i-1;2、函数定义：封装了一段可以重复执行、调用的代码块使用：声明函数function 函数名() {函数体//函数不调用，自己不执行}调用函数：函数名()；函数的参数：♥ 形参  （声明中，形式上的参数，函数定义的时候传递的参数，当前并不知道是什么）                    ♥ 实参（调用中，实际参与运算的参数实际上的参数，函数调用的时候传递的参数，实参是传递给形参的）function 函数名(形参1，形参2，……){}函数名(实参1，实参2，……)当调用函数的时候，传入的实参比函数声明时指定的形参个数少时，剩下的形参都将设置为undefined。因此建议实参和形参个数尽量相匹配，实在不相等时建议给省略的参数赋一个合理的默认值。函数的返回：♥ 通过return语句将函数结果返回给函数调用者。函数名() =return 后面的结果；                     ♥ 在使用中通常用一个变量来接收函数的返回值；                     ♥ return终止函数并且只能返回一个值，若用，隔开，以最后一个参数为准；                     ♥ 函数没有return则返回undefined；break，continue，return的区别break：结束当前的循环体（如for，while）continue：跳出本次循环，继续执行下次循环（如for，while）return ：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码。

华为云ID：hw611633291、计算机基础标记语言：被读取（html）编程语言：❤ 机器语言❤  汇编语言❤  高级语言计算机组成：数据存储：二进制存储存储单位：bit->Byte->kb->GB->TB程序运行：硬盘->内存->CPU2、javascript基础1）javascript是运行在客户端的脚本语言（无需编译，在运行时由js引擎逐行解释运行），也可基于Node.js进行服务器端编程。2）浏览器分成两部分渲染引擎和JS引擎渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit.JS引擎：也称为JS解释器，用来读取网页中的javascript代码，对其处理后运行，比如chrome浏览器的V8浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码，JS引擎执行代码时间逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言。3）JS的组成ECMAScript:JavaScriptDOM:页面文档对象模型BOM:浏览器对象模型4）JS书写位置行内式的JS内嵌式的JS外部式的JS：适合于JS代码量比较大的情况引入外部JS文件的script标签中间不可以写代码（空标签）5）JS中的注释vscode中的快捷键：//单行注释：Ctrl +/；/********/多行注释Alt + Shift + A6）JS输入输出语句输入框：prompt('用户可输入')弹出警示框：alert（‘输出/展示给用户的窗口’）控制台输出：console.log（‘程序员可见窗口’）7）变量定义：变量是存放数据的容器使用：声明变量：var 变量名 var age;赋值：age = 18;变量初始化：声明变量并赋值； var age = 18 ；变量的语法扩展：更新变量：变量多次赋值，以最后一次赋值为准。声明多个变量：var age=18, myname = 'dodo', sex ='female';特殊情况：只声明，不赋值，结果为undefined（未定义的）；不声明，不赋值，直接使用，结果为 报错，** is not defined；不声明，直接赋值使用，结果为自动定义为全局变量。变量的命名规范：字母、数字、下划线组成，不能以数字开头，不能是关键字或保留字，遵守驼峰命名法。name也有特殊意义，最好不要作为变                                  量名。数据类型

CSS第五章、第六章学习笔记第五章:CSS浮动：指将元素脱离文档流向左或者向右布局，使用float属性来设置。none:不浮动；left:向左浮动；right：向右浮动。                       一旦对元素设置浮动后，不论之前元素是内联元素还是块级元素，都会被当作块级元素处理。                        一旦对元素设置浮动后，该元素便会脱离标准流，会造成其父元素的内容塌陷(即父元素内容为空，高度变为零)。1）清除浮动：clear属性用于设置元素哪一侧不允许浮动；                  none:不进行控制；                  left:左侧不允许浮动                  right：右侧不允许浮动                  both：两侧都不允许浮动   .clear{    clear:both; /*   clear:left;    clear:right;*/  }    左边   右边     //清除浮动的div必须放在父元素的最后,clear必须作用于块级元素   2）overflow属性用于设置元素不够容纳内容时的显示方式，默认为visible                  auto：自动添加滚动条                   hidden：匿藏掉超出的内容(也可以清除浮动)                   scroll：一直显示滚动条  .box {    overflow:hidden; //清除浮动   }   .left {    float:left;  }  .right{    float:right;  }       左边    右边 3）企业级应用中清除浮动的最佳方法：clearfix方案：使用伪元素after在父元素尾部添加一个元素对这个添加的伪元素应用清除浮动的样式必备三大样式：content、clear、display可选三大样式：height、font-size、visibility .clearfix:after{content:"";clear:both;display:block;}     左边    右边 4）**翼布局使用float属性让左、中、右三列浮动使用负margin属性让左右两列与中间列处于同一水平线上在中间列中增加一个div内容元素，设置margin值为左右两列的宽度清除浮动，让父元素高度正常显示。**翼布局的优点：♥ 中间内容列宽度自适应♥ 中间内容区域先加载♥ 使用浮动布局♥ 巧妙使用负margin属性保持三列水平♥ 浏览器兼容性好第六章CSS定位：定位属性可以设置元素在页面中的位置♥可以使用z-index设置定位元素的层级，值越大，显示时越是覆盖在其它元素的上边，z-index属性默认值为auto，代表层级与父元素相同。该属性只在position值为absolute时起作用。♥ 相对定位是指元素相对于标准文档流中的默认位置来进行定位。相对定位不会让元素脱离标准流，不会影响周围其它元素的排布，一般和位置属性一起使用。♥ 绝对定位（absolute）相对于除static定位之外的第一个父元素进行定位，如果没有就（一层一层往上找）相对于页面定位，被设置为绝对定位的元素会脱离标准流，当多个绝对定位元素出现相互遮盖的情况时，可以使用z-index属性设置层级。♥ 子元素相对于父元素绝对定位，父元素相对定位（不会造成内容塌陷），子元素绝对定位。   .parent {    height:300px;     position:relative;     }     .child {   height:100px;    width:100px;      positon:absolute;    left:50%;     }      我是父元素，我使用相对定位     我是子元素，我使用绝对定位   

华为云ID:hw61163329CSS浮动：指将元素脱离文档流向左或者向右布局，使用float属性来设置。none:不浮动；left:向左浮动；right：向右浮动。                       一旦对元素设置浮动后，不论之前元素是内联元素还是块级元素，都会被当作块级元素处理。                        一旦对元素设置浮动后，该元素便会脱离标准流，会造成其父元素的内容塌陷(即父元素内容为空，高度变为零)。1）清除浮动：clear属性用于设置元素哪一侧不允许浮动；                  none:不进行控制；                  left:左侧不允许浮动                  right：右侧不允许浮动                  both：两侧都不允许浮动  .clear{     clear:both;  /*   clear:left;     clear:right;*/   }       左边  右边   //清除浮动的div必须放在父元素的最后,clear必须作用于块级元素   2）overflow属性用于设置元素不够容纳内容时的显示方式，默认为visible                  auto：自动添加滚动条                   hidden：匿藏掉超出的内容(也可以清除浮动)                   scroll：一直显示滚动条  .box {     overflow:hidden; //清除浮动    }     .left {     float:left;   }   .right{     float:right;   }     左边  右边 3）企业级应用中清除浮动的最佳方法：clearfix方案：使用伪元素after在父元素尾部添加一个元素对这个添加的伪元素应用清除浮动的样式必备三大样式：content、clear、display可选三大样式：height、font-size、visibility .clearfix:after{content:"";clear:both;display:block;} //display必须设置为block .clearfix:after{content:"";clear:both;display:block;height:0px;font-size:0px;visibility:hidden;}  左边  右边 4）**翼布局使用float属性让左、中、右三列浮动使用负margin属性让左右两列与中间列处于同一水平线上在中间列中增加一个div内容元素，设置margin值为左右两列的宽度清除浮动，让父元素高度正常显示。

为华为点赞！！！

华为云账号：hw611633291、web简史定义WWW(World Wide Web)万维网是集文本、声音、图像、视频等多媒体信息于一身的全球信息资源网络。W3C(World Wide Web Consortium)万维网联盟是Web技术领域最具权威与影响力的国际中立性技术标准机构。成员机构由设立在美国麻省理工大学、欧洲数学与信息学研究联盟、日本庆应大学和中国北 京航空航天大学的四个全球总部的全球团队联合运营。网站Website中文名为网站，是指在 Internet上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。人们可以通过网站发布自己想要公开的资 讯，或者利用网站提供相关的网络服务。网站是在互联网上拥有域名或地址并提供一定网络服务的主机，是存储文件的空间 以服务器为载体。人们可通过浏览器等进行访问、查找文件，也可通过远程文件传 输（FTP）方式上传、下载网站文件。网址在浏览器中输入网站的地址就可以打开想要访问的网站，那么这个网站的地址我们 称之为URL，中文名为统一资源定位符，俗称网址。URL格式协议：//主机地址+目录路径+参数常用协议htt协议，超文本传输协议，是用于从万维网服务器传输超文本到本地浏览器的传 输协议。ftp协议，文件传输协议，可以通过FTP访问服务器上的文件。file协议，主要用于访问本地计算机中的文件。浏览器内核浏览器内核负责对网页语法进行解释，浏览器內核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。IE浏览器：由微软公司出品，采用 Trident内核Chrome浏览器：由 Google公司出品，采用 Webkit内核，后换成Bink内核Firefox浏览器：由 Mozilla公司出品，采用 Gecko内核Safari浏览器：由苹果公司出品，采用 Webkit内核Opera浏览器：由Opea公司出品，采用 Presto内核web服务器Web服务器主要是提供网上信息浏览服务。Web服务器可以解析HTTP协议，当 Web服务器接收到一个HTTP请求时，会返回一个HTTP响应，这样客户端就可以从服务器上获取网页内容，包括CSS、JS、音频、视频等资源。2、web开发Web开发主要分为前端开发和后端开发两部分，前端更侧重于页面的展示与用户的交互，后端更侧重于数据的处理与服务的访问。HTML与 XHTML的关系XHTML是可扩展超文本标记语言，是一种更严格、更纯净的HTM语言。主要的不同点XHTML元素必须被正确地嵌套XHTML元素必须被关闭标签名必须用小写字母XHTML文档必须拥有根元素html标签HTML是由一系列标签组成的，每个标签是以“”和“>”包裹的单词，通常称之为元素。dⅳ用来划分区域，代表网页中的块，所以一般把它叫做块标签； 通常用于包围大块内容，它没有任何特殊的含义； 适合作为最通用的页面容器；span是内联标签，用在一行文本中，用来修饰文字。~标签用于定义标题，其中的重要性最高，而的重要性最低。标签通常用于最顶层的标题。一个HTML文档之中一般只有一个标题。标签用于定义段落，浏览器会自动在其前后创建一些空白；中的文字行数取决于浏览器窗口的宽度 ；中的连续空格最终都将解析成一个空格。为链接标签，用于定义网页链接；href属性表示链接的地址，可以是相对地址或者绝对地址；target属性表示点击链接后打开的方式，默认值为“_self"，代表在当窗口打开新链接，除此之后，还可以设置成“ _blank”，代表在新的窗口中打开。img图片标签标签用于定义一张图片，属性src代表图片的地址，alt属性代表当图片无法显示时的替代文本; 图片的地址可以使用相对路径，也可以使用绝对路径;alt属性不要省略，目的是为了更好的兼容无图浏览器，图片会提示成alt属性内的文字;title属性为鼠标移动到图片上时显示的文案内容；在img标签上，还可以通过增加 heigh属性和 width属性来设置图片的度和高度。ul为无序列表，可以在ul标签上使用type属性定义图形符号的样式，当属性值为disc时显示为点；当属性值为 square时，显示为方块；当属性值为 circle时，显示为圆。标签定义自定义列表，内部可以有多个列表项，每个列表项用定义标题，用定义列表项。

day7+hw61163329+跳跳鱼