作者小头像 Lv.2
144 成长值

个人介绍

这个人很懒,什么都没有留下

感兴趣或擅长的领域

编程语言、数据库
个人勋章
  • 活跃之星
成长雷达
120
24
0
0
0

个人资料

个人介绍

这个人很懒,什么都没有留下

感兴趣或擅长的领域

编程语言、数据库

达成规则

发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32613 468 0
他的回复:
华为云ID:hw65146943ajax登录页面案例pug模版引擎h1 登录华为帐号  div 华为帐号:    input(type="text" id="account" value="rocky")  div 帐号密码:    input(type="password" id="pwd" value="123")  button(type="button" id="btn" ) 登录  script(src="/js/login.js")前端 ajax 登录设置// alert(666);var btn = document.querySelector("#btn");var account = "";var pwd = "";btn.onclick = function() {    account = document.querySelector("#account").value;    pwd = document.querySelector("#pwd").value;    ajax({        type: "post",        url: "/login",        data: {            account,            pwd        },        success(data) {            alert(data);        }    });}function ajax(opts) {    var defaultParam = {        type: "get",        url: "#",        data: {},        async: true,        success(data) {            console.log("从服务器返回的数据为:" + data);        }    }    // 新参数覆盖代替默认参数    for(var k in opts) {        defaultParam[k] = opts[k];    }    var xhr = null;    // ajax浏览器兼容问题    if(window.XMLHttpRequest) {        xhr = new XMLHttpRequest();    }else {        xhr = new ActiveXObject("Microsoft.XMLHTTP");    }    // 对象 到 queryString 字符串    var paramStr = "";    for(var k in defaultParam.data) {        paramStr += k + "=" + defaultParam.data[k] + "&";    }    paramStr = paramStr.substring(0, paramStr.length - 1);        // get or post 请求,其他请求暂且不管    if(defaultParam.type === "get") {        var requestUrl = defaultParam.url + "?" + paramStr;        xhr.open("get", requestUrl, defaultParam.async);        xhr.send();    }else {        xhr.open("post", defaultParam.url, defaultParam.async);        // post 请求 设置 默认queryString 请求头        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");        xhr.send(paramStr);    }    xhr.onreadystatechange = function() {        if(4 === xhr.readyState) {            if(200 === xhr.status) {                defaultParam.success(xhr.responseText);            }        }    }}后端路由设置app.use(async function(ctx, next) {  if(ctx.path === "/login") {    // console.log(ctx.request.body);    // 假设 与数据库的存储数据做匹配    if(ctx.request.body.account === "rocky" && ctx.request.body.pwd === "123") {      ctx.body = "success 登录成功!!";    }else {      ctx.body = "fail 登录失败!!";    }  }}); 
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32613 468 0
他的回复:
华为云ID:hw65146943 AJAXAJAX的产生Asynchronous JavaScript And XML(AJAX)异步的JavaScript和XMLAJAX的优势大幅提升用户体验能够减轻服务器端的压力异步记载局部更新前端通过AJAX技术从后端服务器中获取数据网络通信网络架构OSI参考模型各层的解释应用层为应用程序提供服务表示层数据格式转换、数据加密会话层建立、管理和维护会话传输层建立、管理和维护端到端的连接网络层IP选址及路由器选择数据链路层提供介质访问和链路管理物理层物理层TCP/IP传输控制协议/网际协议物理层数据链路层  >  交换机网络层  >  路由器传输层  >  TCP&UDP应用层网络接口层:物理层 + 链路层http协议特点无状态协议不会建立持久连接NodeJSNode.js    Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行时建立的平台。安装 -->  添加环境变量(win10)node: node命令npm: npm包管理命令$ node -v$ npm -vkoa后端框架koa脚手架全局安装脚手架 koa2-generator$ npm i koa2-generator -gkoa2 搭建Web服务器 -->(koa 项目文件名)$ koa projectNamecd projectName$ npm install// 运行启动$ npm start浏览器端访问:localhost:3000  (默认端口号:3000)XMLHttoRequest对象同步和异步synchronous  简称 sync 代表同步asynchronous 简称 async 代表异步XMLHttpRequest检查XHR// 兼容老版本IE浏览器问题var xhr = null;if(window.XMLHttpRequest) {    xhr = new XMLHttpRequest();} else {   xhr = new ActiveXObject("Microsoft.XMLHTTP");}方法open  初始化send  发送setRequestHeaderContent-typeapplication/x-www-form-urlencoded属性onreadystatechangereadyStatestatusresponseTextXMLHttpRequest的使用四步走创建 XMLHttpRequest使用 open 方法,初始化请求参数使用 send 放,发送请求使用 onreadystatechange 属性,接收返回数据发送Ajax请求最基本的案例:var btn = document.querySelector("button");btn.onclick = function() {        var xhr = null;    if(window.XMLHttpRequest) {        xhr = new XMLHttpRequest();    }else {        xhr = new ActiveXObject("Microsoft.XMLHTTP");    }    xhr.open("get", "/ajax?username=rocky&age=25", true);    // xhr.setRequestHeader("Content-Type", "application/x-www-form/urlencoded");    xhr.send();    xhr.onreadystatechange = function() {        if(4 === xhr.readyState) {            if(200 === xhr.status) {                console.log(xhr.responseText);            }        }    }}Node服务器端设置接收响应// ...app.use(async function(ctx, next) {  if(ctx.path === "/ajax") {    console.log(ctx.query);    ctx.body = "success";  }});// ...JsonP 跨域请求同源策略浏览器的安全策略协议名 + 主机名 + 端口号 需保持一致则是同源跨域请求跨域的方法:JSONP、Proxy、iframe、CORS天然可以跨域的标签:script、img、linkJsonP跨域请求案例:新建端口号为 4000的Node服务端,利用script标签,跨域访问 3000端口的资源,且设置的响应回调函数为callback 函数。端口号为3000 的Node 服务端响应设置, 响应内容放入callback函数内。app.use(async function(ctx, next) {  if(ctx.path === "/ajax") {    console.log(ctx.query);    ctx.body = "success";  }else if(ctx.path === "/jsonp") {    console.log(ctx.query);    ctx.body = "callback('3000port data...')";  }});END
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32613 468 0
他的回复:
华为云ID:hw65146943 数组 - Array创建数组new: new Array()var arr = [];获取数组元素数组的索引  arr[index]遍历数组  for数组的长度 arr.length数组新增元素  arr[index]  = xxx;数组冒泡排序        //定义需要排序的数组        var arr = [2, 4, 5, 3, 1];        //利用冒泡排序将原数组进行升序排列        for (var i = 0; i arr.length - 1; i++) {            for(var j = 0; j = arr.length - i - 1; j++) {                if(arr[j] > arr[j + 1]) {                    var temp = arr[j];                    arr[j] = arr[j + 1];                    arr[j + 1] = temp;                }            }        }        //输出排列后的数组        console.log(arr);函数-Function函数的使用声明函数函数声明  function fn(){}函数表达式 var fn = function(){}调用  fn()函数的参数形参 arguments不定参(伪数组),有length属性实参 parameters返回值 return返回值终止函数对比break和continue作用域 Es5全局作用域     ---  全局变量函数作用域(局部作用域)--- 局部变量P.s:在函数内没有通过关键字var声明变量的也是全局变量。作用域链    逐层查找,直至找到为之,没有则是默认值undefined。JS预解析机制    变量提升!!!对象 - ObjectJs中的对象属性方法创建对象的三种方式利用字面量创建对象利用 new Object 创建对象利用构造函数创建对象对象的调用对象.属性名对象['属性名']、对象.方法名()对象遍历forIn 构造函数    构造函数, 泛指某一大类;用于创建对象,通过 new 关键字创建对象的过程,也称为对象实例化new 关键字Js三大对象自定义对象内置对象浏览器对象内置对象Math  ---  不是构造函数,无需实例化Math.PIMath.random()Math.abs()...new Date()时间戳   ---  1970/1/1new Date().valueOf()new Date().getTime()+new Date()Date.now()new Array()arr.push()arr.pop()...new String()str.charAt()str.charCodeAt()str[index]...基本包装类型    基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有属性和方法。stringnumberboolean简单类型与复杂类型简单类型(基本数据类型或者值类型)stringnumberbooleanundefinednull复杂类型(复杂数据类型/引用数据类型)ObjectArrayDate栈和堆的概念堆栈空间分配区别:    栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面    堆(操作系统):存储复杂类型(对象),一般有程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型放到堆里面END
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32613 468 0
他的回复:
华为云ID:hw65146943  JavaScript 运算符运算符    运算符(operator)也被称为操作符,适用于实现赋值、比较和执行算术运算等都功能的符号。JS常用的运算符有:算术运算符递增和递减运算符比较运算符逻辑运算符赋值运算符算术运算符    算术运算使用的符号,用于执行俩个变量或指的算术运算符。+  加-  减*  乘/  除%  取模(取余)浮点数的精度问题    浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。case:var result = 0.1 + 0.2;   // 0.30000000000000004console.log(0.7 * 100);    // 7.000000000000001    综上案例所示,所以:不要直接判断俩个浮点数是否相等!表达式和返回值    表达式:使用数字、运算符,变量等以能求得数值的有意义排列方法所得的组合。    简单理解:是由数字、运算符、变量等组成的式子。递增和递减运算符    如果需要仿佛给数字变量添加或减去1,可以使用递增(++)和递减(--)运算符来完成。    在Js中,递增(++)和递减(--)既可以放在变量前面,也可以放在变量后面。放在变量前面,我们可以称为前置递增(递减)运算符。    注意:递增和递减运算符必须和变量配合使用。递增运算符前置递增运算符    ++num 前置递增,就是自加1,类似num = num + 1,但是 ++num 写起来更简单。    使用口诀:先自加,后返回值。后置递增运算符    num++ 后置递增,就是自加1,类似于 num = num + 1,但是 num++ 写起来更简单。    使用口诀:先返回原值,后自加。前置递增和后置递增小结前置递增和后置递增运算符可以简化代码的编写,让变量的值 +1 比以前写法更简单单独使用时,运行结果相同与其他代码联用时,执行结果会不同后置:先原值运算,后自加(先人后记)前置:先自加,后运算(先己后人)开发时,大多使用后置递增/减,并且代码独占一行,例:num++; 或 nu--。总结:前置递增/递减,直接先返回运算结果。后置递增/递减,先返回原先变量值,当遇到与其他值计算完毕后再在进行对原先变量的计算操作(递增/递减)后赋值。比较运算符    比较运算符(关系运算符)是俩个数据进行比较时所使用的的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果。  小于号>  大于号>=  等于等于号=  小于等于号==  判等号(会转型)!=  不等号(会隐式转换数据类型)===  全等(全等 要求值和数据类型都一致)!== 全不等逻辑运算符    逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断。&&  “逻辑与”,简称“与”  and||  “逻辑或”,简称“或”  or!   “逻辑非”,简称“非”  not“逻辑与” - &&    俩边值都是 true 才返回 true,否则返回 false。“逻辑或” - ||    俩边都为 false 才返回 false,否则都为 true。逻辑非 !    逻辑非(!)也叫做取反符,用来取一个布尔值相反的值,如 true 的相反值是 false。逻辑中断(短路操作)逻辑或语法:表达式1 || 表达式2如果第一个表达式的值为真,则返回表达式1的值如果第一个表达式的值为假,则返回表达式2的值console.log(123 || 456);    // 123console.log(123 || 0);      // 123  console.log(0 || 456);      // 456console.log(0 || false);    // false逻辑与语法:表达式1 && 表达式2如果第一个表达式的值为真,则返回表达式2的值如果第一个表达式的值为假,则返回表达式1的值console.log(123 && 456);    // 456console.log(123 && 0);      // 0console.log(0 && 123);      // 0console.log(0 && false);    // 0赋值运算符    用来把数据赋值给变量的运算符。=  直接赋值+=、-=  加、减运算后再赋值*=、/=、%=  乘、除、取模运算后再赋值运算符优先级优先级描述运算符1小括号()2一元运算符++、--、!3算术运算符先 *、/ 后 -4比较运算符>、>=、=、5相等运算符==、!=、===、!==6逻辑运算符先 && 后 ||7赋值运算符=8逗号运算符,一元运算符里面的逻辑非优先级很高逻辑与比逻辑或优先级高JavaScript 流程控制 - 分支流程控制    在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。    简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行    流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。顺序流程控制    顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。分支流程控制 if 语句分支结构    由上到下的执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。JS语言提供了俩种分支结构if 语句switch 语句If语句语句结构// 条件成立执行代码,否则什么也不做if(条件表达式) {    // 条件成立执行的代码语句}        语句可以理解为一个行为,循环语句和分支语句就是典型的语句。一个程序由很多个语句组成,一般情况下,会分割成一个一个的语句。执行流程if else 语句(双分支语句)语法结构// 条件成立 执行 if 里面的代码,否则执行 else 里面的代码if(条件表达式) {    // [如果] 条件成立执行的代码} else {    // [否则] 执行的代码}执行流程if else if 语句(多分支语句)语法结构// 适合检查多重条件if(条件表达式1){    语句1;}else if(条件表达式2) {    语句2;}else if(条件表达式3) {    语句3;    ....} else {    // 上述条件都不成立执行此代码}三元表达式    三元表达式也能做一些键的条件选择。有三元运算符组成的式子成为三元表达式。var addOpeartion = 1 + 2 === 3var result = addOpeartion ? "yes" : "no";console.log(result); 分支流程控制 switch 语句语法结构    switch 语句也是多分支语句,它用于不同的条件来执行不同的代码。当要针对变量设置一系列特定值的选项时,就可以使用 switch 语句。switch(表达式) {    case value1:        // 表达式 全等于 value1 时要执行的代码        break;    case value2:        // 表达式 全等于 value2 时要执行的代码        break;    default:        // 表达式 不等于任何一个 value 时要执行的代码}  使用 switch 时的注意事项:不写 break语句 会有穿透现象当表达式不满足任何一个case的值时 执行 default语句 switch 语句和 if else if语句的区别一般情况下,他们俩个语句可以相互替换swtich...case语句通常处理 case 为比较确定值的情况,而 if...else...语句更加灵活,常用于范围判断(大于、小于、等于某个范围)switch 语句进行条件盘都后直接执行到程序中的条件语句,效率更高。而 if...else 语句有几种条件,就得判断多少次。当分支比较少时,if...else语句的执行效率比 switch语句高。当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。END
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32613 468 0
他的回复:
华为云ID:hw65146943 计算机编程基础计算机编程基础什么是编程语言编程语言和标记语言的不同常见的数据出储存单位以及其换算单位计算机内存的主要作用以及特点编程语言计器语言(二进制)汇编语言(采用英文文缩写标识符)高级语言翻译器编译器编程语言和标记语言的区别编程语言有很强的逻辑和行为能力,通过指令,主动执行代码。标记语言不向计算机发出指令,常用语格式和链接。用于被读取,是被动的。常见计算机数据存储单位bitByteKBMBGBTB换算关系:位: bit1bit可以保存一个0或者一个1(最小的存储单位)字节:Byte1B = 8bit千字节:KB1Kb = 1024B兆字节:MB1MB = 1024KB吉字节:GB1GB = 1024MB太字节: TB1TB = 1024GB程序运行过程执行程序时,先从硬盘加载到内存中CPU执行内存中的代码编译器:全部文件编译完毕再执行代码解释器:继往开来,即逐行解释每条代码执行,直到解释完毕;然而中途程序报错,即不再执行代码....so~ 编译一时爽,一直解释一直爽编译器:全部文件编译完毕再执行代码解释器:继往开来,即逐行解释每条代码执行,直到解释完毕;然而中途程序报错,即不再执行代码....so~ 编译一时爽,一直解释一直爽JavaScript简介Js历史Brendan Eich  1961~20xxJs于1995,用时10天诞生LiveScript -->  JavaScript(Sun公司出品)Js是什么运行在客户端的脚本语言脚本语言:不需要编译,运行过程有js解释器逐行解释并执行代码服务端基于 Node.js 技术进行服务端编程Js的作用表单动态校验(最初诞生原由)网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js)HTML/CSS/Js的联系HTML - structureCSS - presentationJS - behavior浏览器执行 JS 简介    浏览器分词俩部分:渲染引擎和 JS引擎渲染引擎:用于解析HTML和CSS,俗称内核。例:chrome的blink,来版本的 webkitJs引擎:也称JS解释器。用于读取网页中的Js代码,对其处理后运行。例:chrome的 V8引擎。Js的组成JavascriptECMAScript  - Js语法Dom - 页面文档对象模型Bom - 浏览器对象模型Js三种书写位置行内式内嵌JS外部JS引入Js输入输出语句alert(msg)console.log(msg)prompt(info)从表单验证,网页特效,到后端开发,App、游戏开发、物联网,这么多年JS到底经历了什么???想来也就二十多的小青年,弄他~变量变量    变量用于存放数据的容器。通过 变量名 获取数据,甚至可以修改。    本质:变量是程序在内存中申请的一块用来存放数据的空间。申明变量var age;var 是一个 Js的关键字,用于声明变量(variable),使用关键字声明变量后,计算机自动为变量分配内存空间,不需要程序员管。age是自定义的变量名,我们需要通过变量名来访问内存中分配的空间赋值var age;age = 10;= 同来把右边的值赋给左边变量空间中,等号此处代表赋值的意思变量值是程序员保存到变量空间里的值变量初始化var age = 18;声明一个变量并赋值,我们称之为 变量的初始化。变量的使用    通过变量名来使用var age = 18;console.log(age);更新变量    一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。var age = 18;age = 81;console.log(age);    // 81同时声明多个变量    同时声明多个变量时,只需要写一个var,多个变量名之间使用英文逗号隔开。var age = 18,    name = "rocky",    sex = "男";声明变量特殊情况只声明,不赋值。 -->  undefined不声明,不赋值,直接使用。  -->  报错 is not defined不声明,只赋值。 -->  变量名挂载在widnow对象上变量命名规范用字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成严格区分大小写不能以数字开头不能是 关键字、保留字变量名要有语义化遵守驼峰命名法(camelCase)开发时要严格遵守变量名的规范,否则啊会造成全局污染了。数据类型为什么需要数据类型?    在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。    变量的数据类型    变量是用来的存储值的所在处,他们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说是动态语言。这意味着不用提前声明变量的类型,在程序执行过程中,类型会被自动确定。var age = 10;    //  数字型var areYouOk = "Ok";     // 字符型    在代码运行时,变量的数据类型是由JS引擎根据 = 右边变量值的数据类型判断的,运行完毕之后,变量就确定了数据类型。    Js 拥有动态类型,同时也意味着相同的变量可用做不同的类型:var x = 6;     // 数字型    var x = "Bill";    //   字符型数据类型的分类    Js 把数据类型分为俩类:简单数据类型Number  数字型String  字符型Boolean  布尔型Undefined  未定义Null  空值复杂数据类型object数字型    在Js中八进制前面加0,十六进制前面加0x。//  八进制var nub = 012;    // 10 十进制// 十六进制var nub = 0xf;    //  15 十进制数字型范围Number.MAX_VALUE  最大值Number.Min_VALUE  最小值数字线三个特殊值Infinity   无穷大-Infinity  无穷小NaN   非数值 Not a numberisNaN()    用来判断一个变量是否为非数字的类型,返回 true 或者 false。字符型    字符型可以是引号中的任意文本,其语法为双引号""和单引号''。字符串引号嵌套    Js 可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)。字符串转义符    类似HTML里面的特殊字符,字符中也有特殊字符,我们称之为转义符。    转义符都是 \ 开头的, 常用的转义符如下\n  换行符,n 是 newline 的意思\\  斜杠\\'  ' 单引号\"  " 双引号\t  tab 缩进\b  空格,b 是 blank 的意思字符串长度    字符串是由若干字符组成的,这些字符的数量就是字符的长度。通过字符串的 length 属性可以获取这个字符串的长度var str = "Are you ok?";console.log( str.length );    //  11字符串拼接多个字符串之间可以使用 + 进行拼接,其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串拼接前会把与字符串详解的任何类型转成字符串,再拼接成一个新的字符串+ 号总结诀:数值相加,字符相连布尔型 Boolean    布尔类型由俩个值: true和false,其中true表示真(对),false表示假(错)    布尔型和数字型相加的时候,true的值为1,false的值为0console.log(true + 1);    //    2console.log(false + 1);    //    1Undefined     一个声明后没有被赋值的变量会有一个默认值 undefined(如果进行相连或者相加时,注意结果)Null    一个声明变量给 null 值,里面存的值为空;null 的类型为 复杂类型 object。获取变量的数据类型字面量 literal    字面量是在源代码中一个固定值的表示发,通俗来书哦,就是字面量表示如何表达着个值。数字字面量字符串字面量布尔字面量数据类型转换什么是数据类型转换?    使用表单、promopt获取过来的数据默认是字符串类型,此时就不能退直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种的数据类型。常见的三种方式的转换:转换为字符串类型转换为数字型转换为布尔型转换为字符串toString()String()加号拼接字符串    toString() 和 String() 使用方式不一样。    三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式,这一种方式也称之为隐式转换。转换为数字型parseInt()parseFloat()Number()Js隐式转换( - * /)转换为布尔型Boolean()    代表空、否定的值会被转换为 false,如""、0、NaN、null、undefined    其余值都会被转换为 true悉知:标纸符、关键字、保留字数据类型是指存在变量中的不同数据类型;由于JS是弱类型(动态语言)的编程语言,所以不同类型的数据可存在相同的变量中,这是没有问题滴。不同的数据类型可以相互转换,分别为自行转换和隐式转换。自行转换可通过全局函数方法或者自身实例方法等;隐式转换是JS自动转换滴。END