作者小头像 Lv.1
9 成长值

个人介绍

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

感兴趣或擅长的领域

暂无数据
个人勋章
TA还没获得勋章~
成长雷达
0
9
0
0
0

个人资料

个人介绍

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

感兴趣或擅长的领域

暂无数据

达成规则

发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32570 468 0
他的回复:
华为id: hw21424327打卡ajax的第四章和第五章第四章 jQuery 中的 AjaxjQuery 介绍jQuery 是 JavaScript 的一个库,它极大地简化了 JavaScript 编程。它广泛地使用一种$符号。一些 JS 是对 DOM 元素的操作,然而这些 JS 代码在执行到它时,DOM 还未加载,这个时候就会出现错误,正确的做法是把这个 JS 写到标签后,或者在 JS 中使用 ready方法等待 DOM 加载完才去执行 DOM 相关的 JS 操作。alert("hello"); $(document).ready(function(){ $("#name").html("hello world");})extends layout block content block(id="name")jQuery 中的 get 与 post 方法jQuery中的get方法使用时写为$.get(url, data, callback, type),括号中是它的参数,除了url其余三个可以省略。这四个参数详解为:url:请求的地址data:请求的参数callback:请求成功时的回调函数type:请求返回的数据格式请求参数可以是 JSON,可以是字符串。返回的数据格式可以是:JSON,HTML,Text等。post方法使用时写为$.post(url, data, callback, type),post请求参数放在请求体中,其余用法与get方法大致相同。案例$(function){ $("#name").html("classroom"); $.get("/ajax", function(){ console.log(variable); },"script")}需要修改koa中app.js的内容,这样get请求成功时才能打印出variable(app.js是服务器的内容,我们需要使用get方法访问服务器,并得到相应数据,这里是一个模拟)。koa中的app.js增加下述内容:app.use(async function(ctx){ if(ctx.path=="/ajax"){ ctx.body="var variable='hello world'"; }})jQuery 中的 ajax 方法jQuery的ajax方法是post和get方法底层方法。它使用的格式为$.ajax(option),option是JSON格式的配置参数,用于设置ajax的请求。常用配置有:url:发送请求的地址,type:请求方式(get和post),data:请求参数,dataType:返回的数据类型(JSON、html、xml)。success:请求成功后的回调函数,error:请求失败后的回调函数,complete:请求不论成功或者失败后返回的函数布尔类型的请求:async:是否为异步,cache:进行缓存,timeout:请求超时时间(毫秒)案例(对上节get方法的内容使用ajax方法重写)$.ajax({ url: '/ajax', dataType: 'script', success: function(){ console.log(variable); }})第五章 AJAX实战案例第一节 登陆页面案例Node.js初始化项目       koa2 login    cd login && cnpm install    npm startviews/index.pugblock content    h1 登陆华为帐号    div 华为帐号:      input(type='text' id='account')    div 帐号密码:      input(type='password' id='pwd')    button(type='button' id='btn') 登陆    加载资源login.js 登陆提交及ajax请求发送views/layout.pug    block content    javascripts/login.js //alert('login') // 测试login.js是否能在首而成功加载 var btn = document.getElementById("btn");var account = '';var pwd = '';btn.onclick = function(){    account = document.getElementById("account").value;    pwd = document.getElementById('pwd').value;    ajax({        type: 'post',        url: '/login',        data:{            account: account,            pwd: pwd        },        success: function(data){            alert(data)        }    })    function ajax(opt){        var defaultParam = {            type: 'get',            url: '#',            data: {},            async: true,            success: function(){}        }        for(var key in opt){            defaultParam[key] = opt[key];        }        var xhr = null;        if(window.XMLHttpRequest){            xhr = new XMLHttpRequest();        }else{            xhr = new ActiveXObject('Microsoft.XMLHTTP');        }        var paramStr = "";        for(var k in defaultParam.data){            paramStr += k + '=' + defaultParam.data[k] + '&';        }        paramStr = paramStr.substr(0,paramStr.length - 1);        console.log(paramStr);        if(defaultParam.type == 'get'){            xhr.open(defaultParam.type,defaultParam.url + '?' + paramStr,defaultParam.async);            xhr.send()        }else{            xhr.open(defaultParam.type,defaultParam.url,defaultParam.async); // post请求            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');            xhr.send(paramStr)        }        xhr.onreadystatechange = function(){            if(xhr.readyState == 4){                if(xhr.status == 200){                    defaultParam.success(xhr.responseText);                }            }        }    }}项目接口配置在login.js中我们自定义ajax()方法中url对应的接口,在此配置app.js// 未尾添加app.use(async function (ctx){  if(ctx.path == "/login"){    if(ctx.request.body.account == 'zhou' && ctx.request.body.pwd == '123'){      ctx.body = '登陆成功 !'    }else{      ctx.body = '登陆失败 !'    }  }})module.exports = app
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32570 468 0
他的回复:
ajax第三章打卡 id:hw21424327第三章 揭秘AJAX第一节 XMLHttpRequest同步和异步同步:synchronous 简称sync异步:asynchronous 简称 asyncXMLHttpRequest简称:XHR方法:xhr.open() xhr.send() setRequestHeader Content-type属性:onreadystatechange    readyState    Status    Response TextXMLHttpRequest的使用四步走:1、创建XMLHttpReuestvar xhr = new XMLHttpRequest();2、使用open方法,初始化请求参数xhr.open("get", "/ajax", true) //请求的方法,常用的主要是get和post;接口的地址;表明请求是同步还是异步,ture为异步3、使用send方法,发送请求xhr.send() //发送具体的请求,如果是post方法,请求放在send里,如果是get方法,请求放在xhr.open的接口地址位置4、使用onreadystatechange属性,接收返回数据xhr.onreadystatechange = function(){ xxxxx}//当readystate发生变化时,就会触发function,执行里面的函数第二节 AJAX的使用客户端(浏览器)四步走发送ajax请求open(method,url,async)setRequestHeader("Content-type","application/x-www-form-urlencoded")//当post方法时,设置send(param)readyState:4 //0、1、2、3、4常用4,代表请求已经完全返回status:200服务器接收请求返回数据启动项目在index.pug添加代码在layout.pug中引入ajax.js文件编写ajax.js文件在app.js文件中添加服务器端app.use(async function(ctx, next) {     if (ctx.path == "/ajax") {         ctx.body = "hello ajax!"     } })第三节 跨域请求同源策略浏览器的安全策略协议名+主机名+端口号 同源是指"协议+域名+端口"三者相同跨域请求方法:JSONP、Proxy、iframe、CORS天然可以跨域的标签:script(img、link)跨域请求同源策略浏览器的安全策略防止不同域的情况获取别人的数据协议名+主机名+端口号 当三者相同时,才是同一域跨域请求跨域的方法:JSONP、Proxy、iframe、CORS天然可以跨域的标签:script(img、link)将项目ajax复制一份,重新命名为ajax2修改端口为3002构造场景,2号站点发送请求获取一号站点的信息把2号站点的请求地址改为1号站点的请求地址在2号站点发送请求提示错误,不允许跨域获取信息那通过什么来实现跨域请求呢我们常用JSONP的方法来实现跨域请求,使用天然的跨域标签修改ajax2的index.pug,和ajax1做区分对layout.pug进行修改,添加如下代码script.   function f (data) {     console.log(data)   }  //pug语法   //使用script实现跨域对站点1的接口进行修改,将f函数写入app.js
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32570 468 0
他的回复:
ajax第一章和第二章打卡 id:hw21424327第一章:初识AJAX一、AJAX的优势大幅度提升用户体验能够减轻服务端的压力异步加载局部更新前端通过ajax技术从后端服务器中获取数据二、AJAX网络通信 (分层设计思想)TCP/IP(传输控制协议/网络协议)  OSI 7层网络模型:物理层数据链路层--->交换机网络层--->路由器传输层--->TCP&UDP会话层--->建立,管理和维护会话表示层--->数据格式转化,数据加密应用层--->为程序提供服务网络接口层:物理层+链路层OSI模型把网络通信的工作分为7层,从下向上分别是 物理层--数据链路层--网络层--传输层--会话层--表示层--应用层  OSI模型的设计目的是成为一个所有销售商都能实现的开放网路模型  OSI模型可以克服使用众多私有网络模型所带来的困难和低效性  OSI模型是设计和描述计算机网络通信的基本框架三、http协议http 协议特点 (请求和相应)无状态协议不会建立持久连接第二章:node.js服务node.jsNode.js 就是运行在服务端的 JavaScript的开放源代码、跨平台JavaScript运行环境官网:https//nodejs.org定义:nodejs是一个基于chrome v8 引擎运行代码,单线程异步IO安装 (新版本的nodejs已经集成了npm)NPM全称Node PackageManager,即node包管理器)是Node.js默认的、以JavaScript编写的包管理系统。用npm安装,可以先用npm install cnpm -g 安装cnpm(中国淘宝的cdn)。之后使用cnpm安装npm 版本查询npm -vnpm config set registry https://repo.huaweicloud.com/repository/npm/npm cache clean -f##安装脚手架npm install koa-generator -g //安装koakoa2 ajax //使用koa2命令创建web项目cd ajax && npm install //进去项目目录安装依赖包nmp start //运行项目先搞清楚bin里的www为项目入口,通过它引入app.js配置内容。node_moudel为模块加载生成的文件夹,里面全是模块功能的源码。public公共文件夹,放一些样式、页面js逻辑、图片。routers路由,功能为分发请求。views为视图文件,jade是一个文本格式,其内容还可以是我们最熟悉的html。app.js和package.json是配置文件
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32570 468 0
他的回复:
打卡第六章  id:hw21424327第六章笔记内置对象JS对象:自定义对象、内置对象、浏览器对象。内置对象是指JS自带的一些对象,提供了一些常用的或是最基本而必要的功能(属性和方法)。Math对象Math.max(); // -Infinity Math.max(3, 'abc'); // NaN Math.abs(-1); // 1 Math.abs('-1'); // 1,隐式转换 Math.abs('abc'); // NaN Math.floor(1.9); // 1 Math.ceil(1.1); // 2 Math.round(1.4); // 1 Math.round(1.5); // 2 Math.round(-1.1); // -1 Math.round(-1.5); // -1,5较大,向上取整,为-1 Math.random(); // 此方法无参数,返回[0, 1)之间的随机值 // 自定义带参数的随机整数方法,返回[min, max]之间的随机整数 function getRandom(min, max) {     return Math.floor(Math.random() * (max - min + 1)) + min; } // 自定义带参数的随机整数方法,返回[min, max)之间的随机整数 function getRandom(min, max) {     return Math.floor(Math.random() * (max - min)) + min; }Data对象var date = new Date(); var date = new Date(2020, 10, 1); // 此构造方法,month从0开始,故此时为11月 var date = new Date(''2019-8-3 3:18:00'); date.getFullYear(); date.getMonth(); // month从0开始 date.getDate(); // 日期 date.getDay(); // 星期,起始周日为0 date.getHours(); // 24小时制 date.getMinutes(); date.getSeconds(); // 格式化时间 function getTime() {     var time = new Date();     function getFormatted(num) {         return num  10 ? '0' + num : num;     }     return time.getFullYear() + '-' +      getFormatted(time.getMonth() + 1) + '-' +     getFormatted(time.getDate()) + ' ' +     getFormatted(time.getHours()) + ':' +     getFormatted(time.getMinutes()) + ':' +     getFormatted(time.getSeconds()); } //毫秒数获取方法: date.valueOf(); date.getTime(); var date2 = +new Date(); console.log(date2); // H5新增的 Date.now();倒计时:function countDown(date) {     var diff = (new Date().getTime() - nowTime) / 1000;     var days = parseInt(diff / 60 / 60 / 24);     var hours = parseInt(diff / 60 / 60 % 24);     var minutes = parseInt(diff / 60 % 60);     var seconds = parseInt(diff % 60);     return days + '天' + hours + '时' + minutes + '分' + seconds + '秒'; }数组构造数组var array = new Array(); new Array(2); // 长度为2,值为undefined new Array(3, 4); // 长度为2, 值为3,4判断是否为数组array instanceof Array Array.isArray(array); // H5新增, ie9以上支持操作数组元素arr.push(4); // 向数组尾部添加元素4,返回数组长度 arr.push(4, 'abc'); // 向数组尾部添加4和'abc'两个元素,返回数组长度 arr.pop(); // 删除数组尾部的一个元素,返回被删除的元素 arr.shift(); // 删除数组头部的一个元素,返回被删除的元素 arr.unshift(4); // 在数组头部添加新元素,返回数组长度筛选数组function filter() { var newArr = [];     for (var i = 0; i  arr.length; i++) {         if(condition) {             // newArr[newArr.length] = arr[i];             newArr.push(arr[i]);         }     }     return newArr; }翻转数组: arr.reverse();数组排序:arr.sort(); // 按照字符串比较来排序,如:1,14,5,56 arr.sort(function(e1, e2) {     return e1 - e2; // 升序 });返回数组元素的索引arr.indexOf('a'); // 返回第一个元素的索引,不存在返回-1 arr.lastIndexOf('a'); // 返回最后一个元素的索引,不存在返回-1数组转为字符串var arr = [1, 2, 3]; arr.toString(); // 1, 2, 3 arr.join(); // 1, 2, 3 arr.join('-'); // 1-2-3数组拼接截取concat(); // 连接多个数组,返回一个新数组 slice(begin, end); // 从begin截取到end,返回被截取的新数组 splice(begin, count); // 从begin开始截取count个,返回被截取的原数组字符串对象基本包装类型为方便操作基本数据类型,JS提供了三个特殊的引用类型:String, Number, Boolean.把简单数据类型包装成复杂数据类型,因而基本数据类型具有了一定属性和方法.var str = 'abc'; console.log(str.length); // lengh属性为String包装类型的属性,过程如下: // 1. 生成临时变量,把简单类型包装为复杂数据类型 var temp = new String('abc'); // 2. 赋值给声明的字符变量 str = temp; // 3. 销毁临时变量 temp = null;字符串出现位置str.indexOf('a', index); // 从索引为index开始查找,返回第一个字符的索引,不存在返回-1 arr.lastIndexOf('a', index); // 从索引为index开始查找,返回最后一个字符的索引,不存在返回-1根据位置返回字符:str.charAt(index); str[index]; // H5新增,ie8+支持根据位置返回字符的ASCII码: str.charCodeAt(index);统计字符串中出现次数最多的字符var str = 'cabcdbacb'; var o = {}; for (var i = 0; i  str.length; i++) {     var ch = str.charAt(i);     if (o[ch]) {         o[ch] ++;     } else {         o[ch] = 1;     } } var max = 0; var ch = ''; for (var k in o) {     if (o[k] > max) {         max = o[k];         ch = k;     } } console.log('最多的字符是:' + ch + '出现' + max + '次');拼接与截取str.concat(str1, str2, str3...); str.substr(index, count); substring(start, end); slice(start, end);字符串替换str.replace('a', 'b'); // 只替换第一个匹配的字符 // 全部替换 function replaceAll(str, oldStr, newStr) {     while (str.indexOf(oldStr) !== -1) {         str = str.replace(oleStr, newStr);     }     return str; }字符串转换为数组var str = 'a,b,c'; str.split(','); // 按逗号分割字符串转换大小写str.toUpperCase(); str.toLowerCase();简单类型与复杂类型简单数据类型又叫基本数据类型、值类型在存储时变量中存储的是值本身,string, number, boolean, undefined, null复杂数据类型又叫引用类型,存储时变量中存储的是地址(引用),通过new关键字创建的对象(系统对象、自定义对象),如Object, Array, Date栈:由操作系统自动分配释放存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈。简单数据类型存放在栈中。堆:一般由用户分配释放,若不释放则由垃圾回收机制回收。复杂数据类型存放在堆中。
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32570 468 0
他的回复:
打卡第四章 id:hw21424327第四章 数组与函数入门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语句中的值,同时还可以结束当前的函数体内的代码。
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32570 468 0
他的回复:
打卡第五章 id:hw21424327第五章笔记函数封装了一段可以被重复执行调用的代码块,使大量代码重复使用。声明函数函数关键字声明(命名函数)// 形参不用写类型,不用写var,只写名称即可 function 函数名(形参1, 形参2...) {   // 函数体   // return 返回值;没有return则返回undefined   // return 只能返回一个值,若返回多个值用逗号分隔,则返回最后一个值。 }函数表达式(匿名函数)var 变量名 = function() {   // 函数体 };调用函数函数名(实参1, 实参2...);注意:当实参和形参个数不一致时:实参个数大于形参:正常运行,函数只取形参个数,多余的参数不做处理实参个数小于形参:不够的参数默认为undefined参与运算argumentsarguments是当前函数的一个内置对象,存储了传递的所有实参。arguments是个伪数组伪数组并不是真正意义上的数组,具有以下几个特性具有数组的length属性按照索引的方式进行存储,可心按照数组的方式遍历没有真正数组的一些方法作用域限定变量名可用性的代码范围。全局作用域:整个script标签或整个js文件。在浏览器关闭时才销毁,占内存局部作用域:函数内部。函数被执行时初始化,执行结束后销毁,省内存块级作用域:自es6起增加。if、for的{}范围内部作用域链(就近原则):作用域中会层层包含作用域,在内部函数访问外部变量时,从内部层层向外部使用链式查找,使用就近的变量。函数使用求任意两数的和function getSum(num1, num2) {     console.log(num1 + num2); } getSum(3, 5); // 8求任意两数之间数字的和function getSum(num1, num2) {     var sum = 0;     for (var i = num1; i  num2; i++) {         sum += i;     }     return sum; } console.log(getSum(3, 5)); // 12求两数中较大值function getMax(num1, num2) {     return num1 > num2 ? num1 : num2; } console.log(getMax(3, 5)); // 5求数组中最大值function getMax(arr) {     var max = arr[0];     for (var i = 1; i  arr.length; i++) {         if (arr[i] > max) {             max = arr[i];         }     }     return max; } console.log(getMax([4, 6, 9, 2, 1])); // 9求任意个数的最大值function getMax() {     if (arguments.length = 0) {         return;     }     var max = arguments[0];     for (var i = 0; i  arguments.length; i++) {         if (arguments[i] > max) {             max = arguments[i];         }     }     return max; } console.log(getMax(6, 8, 2));翻转数组function reverse(arr) {     var newArr = [];     for (var i = arr.length - 1; i >= 0; i--) {         newArr[newArr.length] = arr[i];     }     return newArr; }冒泡排序function sort(arr) {     for (var i = 0; i  arr.length; i++) {         for (var j = 0; j  arr.length - i - 1; j++) {             if (a[j] > a[j + 1]) {                 var temp = a[j];                 a[j] = a[j+1];                 a[j+1] = temp;             }         }     }     return arr; }判断闰年function isLeapYear(year) {     return year / 4 && year % 100 != 0 || year % 400 == 0; }输出2月份天数function getDaysInFebruary(year) {     return isLeapYear(year) ? 29 : 28; }JS预解析JS引擎运行JS分为两步:预解析:把所有var和function提升到当前作用域的最前面(将两者的声明放到前边),不提升赋值,即可以先使用再声明(变量值为undefined,命名函数可以正常使用,匿名函数使用会报错)代码执行:按照代码书写顺序从上往下执行预解析案例var num = 10; fun(); function fun() {     console.log(num); // undefined     var num = 20; // 此处num使打印的num为内部变量,故在console.log执行前先预解析,将num声明,紧接着打印即为undefined }var num = 10; function fun() {     console.log(num); // undefined     var num = 20;     console.log(num); // 20 } fun();var a = 10; fun(); function fun() {     var b = 9;     console.log(a); // undefined     console.log(b); // 9     var a = '123'; }fun(); console.log(c); // 9 console.log(b); // 9 console.log(a); // 报错 function fun() {     var a = b = c = 9; // var a = 9; b = 9; c = 9; b和c前没有var,故相当于全局变量     // 三个一起声明应为:var a = 9, b = 9, c = 9     console.log(a); // 9     console.log(b); // 9     console.log(c); // 9 }对象一组无序的相关属性和方法的集合。创建对象字面量:var obj = {    name1: value1, // 多个用逗号分隔   name2: value2,   fun1: function() {} // 对象中的方法,全局的称为函数 };new Objectvar obj = new Object(); obj.name = '123'; obj.fun = function(){};构造函数function 构造函数名(首字母大写)(参数){   this.属性名 = 参数; } var 对象名 = new 构造函数(参数);使用对象1. 对象名.属性名 2. 对象名['属性名'] 3. 对象名.方法名(参数);new关键字的执行过程在内存中创建一个空对象this指向刚创建的空对象执行构造函数里的代码,给新对象添加属性和方法返回这个新对象遍历对象属性for (变量名 in 对象) {     // 遍历 } for (var key in obj)  {     console.log(key + ' : ' + obj[k]); // 属性名:属性值 }
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32570 468 0
他的回复:
id:hw21424327第一章 数据类型一、初识JavaScript1.1什么是JavaScript?JavaScript是一种运行在客户端的脚本语言,属于解释型的语言。1.2 JavaScript三大组成部分:ECMAScript、DOM、BOM。1.3 JS的使用方式:(1)行内式:(2)内嵌式:  将js代码放置在script标签里,这一段可以放在head里,也可以放在文档尾部,最好 放在前面。(3)外部引入式:  放置位置同内嵌式。1.4 JS的注释方法行注释://注释内容块注释:/*注释内容 */1.5 输入输出语句alert();prompt(); console.log();二、变量2.1 什么是变量?变量是存储数据的容器。2.2 如何使用变量变量使用分两步:声明变量+赋值,例如:var age = 19;var是用来声明变量的关键字,age是变量名,19是age的值。2.3 变量命名规范由字母、数字、_、$符组成;严格区分大小写;不能由数字开头;不能是关键字或保留字;变量名须有意义;遵循驼峰命名方法。三、数据类型3.1 分类基本数据类型(值类型)1.Number:用于任何类型的数字:整数或浮点数分为整型、浮点型、Infinity、-Infinity、NaN对于 非数字NaN,可以使用isNaN()方法(是不是非数字)来进行判断。console.log(isNaN(25));//falseconsole.log(isNaN("呵呵"));//trueisNaN检测当前值是否是有效数字,返回true代表不是有效数字,返回false是有效数字isNaN(12)===falseisNaN('1')===falseisNaN(true)===falseisNaN(false)===falseisNaN(null)===falseisNaN(undefined)===trueisNaN({name:9})===trueisNaN([11,12])===trueisNaN([12])===falseisNaN检测的机制首先验证当前要检测的值是否为number类型的,如果不是,浏览器会默认的把值转换为数字类型把非数字类型转换为数字其它基本类型转换为数字,直接使用Number这个方法转换的,如果当前字符串中出现任意一个非有效数字结果则为NaN当检测的值已经是数字类型,是有效数字返回false,不是返回trueNaN == NaN:false NaN和谁都不相等八进制 0~7 程序里面数字前面加0 表示八进制let num = 011;console.log(num); //转为十进制就是9十六进制 0-9 a-f 数字前面加0x表示十六进制let num1 = 0x9;console.log(num);数字型最大值:1.7976931348623157e+308console.log(Number.MAX_VALUE);//1.7976931348623157e+308数字型最小值:5e-324console.log(Number.MIN_VALUE);//5e-324Infinity无穷大 ∞。 大于任何值。可以通过除以 0来得到它:alert(1 / 0); //InfinityBigInt 类型在JavaScript中 " number"类型无法代表大于 253 (或者小于-253)的整数。通过n附加到整数字段的末尾来创建BigIntconst bigInt = 12312312312231231313131313n;兼容性问题目前 Firebox和 Chrome 已经支持 BigInt了,但 Safari/IE/Edge 还没有。2.String:用于字符串:一个字符串可以包含一个或多个字符串可以使用length属性来获取字符串的长度。使用+进行字符串拼接。转义符\开头 常用的转义符:\n 换行\ 斜杠\\' 单引号\" 双引号\t tab缩进\b 空格新增属性:反引号是 功能扩展引号。他们允许我们通过变量和表达式包装在${...}中,来将它们嵌入到字符串中。例如:let name = "json";//嵌入一个变量alert(`helo,${name}!`);//helo,json!${...}内的表达式 会被计算,计算结果会成为字符串的一部分。可以再${...}内放置任何东西:名为name的变量,或者1 +1的算数表达式。需要注意的是,这仅仅在反引号内有效,其它引号不允许这种嵌入。alert("the result is ${ 1 + 1 }");//使用双引号不会计算 ${...}3.Boolean:用于true和false4.null:用于未知的值5 undefined:未定义6.Symbol:唯一的标识符7.BigInt:用于任意长度的整数引用类型(复杂数据类型)Object:用于更复杂的数据结构普通对象数组对象正则对象Date对象JavaScript 中的变量可以保存任何数据。变量在前一刻可以是个字符串,下一刻就可以变成 number类型: 允许这种操作的编程语言称为动态类型的编程语言。3.2 相关方法3.2.1 typeof:获取变量的数据类型(注意使用的时候可以加括号也可以不加括号)'''console.log(typeof aaa);//undefined,这个变量没有定义但是不会报错,aaa此时是变量console.log(typeof 1.1);//number数字型console.log(typeof '1');//string 字符型console.log(typeof true);// 布尔类型 booleanconsole.log(typeof {});//object 是一个对象console.log(typeof function(){});// function 是一个方法,也是属于object类型的js里万物皆对象console.log(typeof null);//object(1) null 是一个空指针console.log(typeof Symbol("id"));//symboltypeof null 的结果是object这其实是不对的,官方也承认了这是运算符的问题,现在只是为了兼容性留了下来。是javascript语言的一个错误'''3.2.2 转换成字符串类型:toString()、String()、使用+拼接进行隐式转换3.2.3 转换成数字类型: parseInt()、parseFloat()、Number()、使用(- * /)做隐式转换3.2.4 转换成布尔类型 Boolean()4 运算符:4.1算术运算符:+,-,*,/,%注意:浮点数最高精度是17位小数,进行算术计算时其精确度远远不如整数,不要直接判断两个浮点数是否相等递增(++),递减(--)递增和递减必须和变量配合使用比较运算符:, >, >=, =, ==, !=4.2 逻辑运算符:    &&:两侧都为true返回true,否则为false    ||:一侧都为true返回true,否则为false    !:去反符4.3 短路运算:   表达式1 && 表达式2:表达式1结果为真,则返回表达式2,反之相反   表达式1 || 表达式2:表达式1结果为真,则返回表达式1,反之相反5 运算符5.1for循环:    循环的目的:有规律的重复操作    for(初始化变量;条件表达式;操作表达式){        //循环体    } 5.2 while循环:    while(条件表达式){        //循环体代码    }5.3 do while循环:    do {        //循环体    }while():continue:跳出本次循环,继续下一次循环break:立即跳出整个循环 
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55661 487 2
他的回复:
CSS第六章打卡 id:hw21424327第六章CSS定位属性笔记第一节定位属性1. 定位属性 定位属性用于设置元素在页面中的位置属性值用position来定位position值可以设置为:static, relative, absolute, fixed其中默认值为static,表示标准流布局2.定位位置 定位元素位置可以指定上下左右四个属性控制元素的位置top 向上偏移距离bottom 向下偏移距离left 向左偏移距离right 向右偏移距离注意:偏移量的值可以为负值3.层级z-index设置元素层级,值越大,显示时越是覆盖在其元素的上边属性值为auto,代表层级与父元素相同属性只在position值为absolute时有效第二节 相对定位position:relative 开启定位标准流文档中的默认位置进行定位,不会让元素脱离标准流,不会影响其他元素的排布相对定位和位置属性一起使用特点:相对布局是指在原先静态布局位置进行布局,没有效果是因为没添加位置属性.第三节 绝对定位position:absolute 开启绝对定位除了static定位之外的第一个父元素进行定位,如果没有就相对于页面定位绝对定位会脱离标准流在使用多个绝对定位时候会出现遮盖时,可以使用z-index属性设置层级.在一个块级元素在设置为绝对定位的时候,父元素的宽度变窄,宽度不像块元素和父元素相同,宽度取决于内容宽度.绝对定位是针对于已经定位的父元素进行定位,如果父元素是positionstatic以外它会根据上下左右进行定位,如果是static以外它会以整个窗口作为参考点定位
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55661 487 2
他的回复:
CSS第五章打卡 id:hw21424327第五章 CSS浮动浮动1、什么叫浮动    浮动是指将元素脱离文档流向左或者向右布局,使用float属性来设置元素的浮动    默认值为none,也就是不浮动,还可设置为left,表示向左浮动;或设置为right,表示向右浮动2、浮动的特点    一旦对元素设置浮动后,不论之前元素是内联元素还是块级元素,都会被当作块级元素处理    一旦对元素设置浮动之后,该元素便会脱离标准流,会造成其父元素的内容塌陷清除浮动1、为什么要清除浮动    元素设置为浮动时引起的父元素内容塌陷,影响布局效果2、clear属性    clear属性用于设置元素哪一侧不允许浮动    默认值为none,表示不进行控制    当设置为left时,表示左侧不允许浮动    当设置为right时,表示右侧不允许浮动    当设置为both时,表示两侧都不允许浮动3、overflow属性    overflow属性用于设置元素不够容纳内容时的显示方式    默认值为visible    当值为auto时,自动添加滚动条    当值为hidden时,会用匿藏掉超出的内容    当值为scroll时,会一直显示滚动条1、企业级应用中清除浮动的最佳方法    clearfix方案    使用伪元素after在父元素尾部添加一个元素,对这个添加的伪元素应用清除浮动的样式    必备三大样式:content、clear、display    可选三大样式:height、font-size、visibility例如:    .clearfix:after { content: “”; clear: both; display: block; }    .clearfix:after { content: “”; clear: both; display: block; height: 0px; font-size: 0px; visibility: hidden; }实战案例1、如何实现一个三列布局    实现一个左中右布局,左右两侧宽度固定,中间内容区宽度能够自适应2、**翼布局(1)中盒子优先显示dom,它的宽度要是100%,其他两个盒子给定宽度,但是这两个盒子会被挤下去(2)左盒子margin-left: -100% , 右盒子margin-left:-自身的宽度(3)中盒子需要margin 0 auto来左右居中,不然会被左盒子覆盖,其实中盒子的宽度一直都是100%父盒子那么宽。3、优点    中间内容列宽度自适应、中间内容区域先加载    使用浮动布局、巧妙使用负margin属性保持三列水平    方法简单直接    浏览器兼容性好
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55661 487 2
他的回复:
CSS第四章打卡 id:hw21424327CSS第四章 CSS盒模型1. 盒模型(box model),html每一个元素都可以看做一个盒模型,盒模型主要是html在布局时使用。浏览器在渲染的时候根据盒模型规则,把html元素当成一个个矩形盒子,css作用在这些模型上表达大小位置颜色等2. 盒模型的构成由四部分组成 content内容 +padding内边距 +border边框 +margin外边距2-1. 内边距 内容边框之间的距离,值可以为固定数值或者百分比,不能是负值。百分比相当于父元素的百分比padding-left 左内边距、padding-right 右内边距、padding-top 上内边距、padding-bottom 下内边距padding: top right bottom left(顺时针:上右下左)padding: 只有一个值的时候,其他三个都复用第一个padding: 两个值的时候,上下为第一个值,左右为第二个值padding: 三个值的时候,左的值为复用第二个值2-2. 边框围绕内容和内边距的矩形框border-style 边框样式 如solid, dashed等等border-width 边框宽度,数值或者thin, medium, thick 通常用的是数值border-color 边框颜色2-3. 外边距外边距是指边框之外的区域,外边距控制元素和元素之间的距离,值可以是固定数值或者百分比,不能是负值margin-left 左外边距、margin-right 右外边距、margin-top 上外边距、margin-bottom 下外边距margin: top right bottom left(顺时针:上右下左)margin: 只有一个值的时候, 所有边距都使用这个值margin:  当有两个值的时候,第一个值为上下两个的边距,第二个值为左右两个的边距;margin:  当有三个属性值的时候,第一个值为上边距,第二个值为左右边距,第三个值为下边距。margin左右设置为auto时,可以居中显示元素左右两侧的其中一边单独设置auto,都会使那边无限大。而同时设置auto则表示两边互相作用而使元素居中显示。当两个块级元素同时设置了margin,那么这两个块级元素之间的距离取决于较大的margin的值。如div元素的margin有叠加(重叠)的属性,以相邻元素的最大值,比如div1的margin=20px; div2的margin=40px; 这个时候div1和div2的margin就是40px;当两个内联元素同时设置了margin,那么这两个内联元素之间的距离为两个margin元素之间的加和。如span元素的margin属性,有相加的结果,比如span1的margin=20px; span2的margin=40px;那么span1和span2的margin=20+40=60px;3. display属性改变原本元素的默认属性,比如改变块级div为内联显示,改变内联span为块级显示display: block 以块级元素方式显示。块级元素特点:元素高度取决于元素内容的高度,宽度取决于它的父元素,比如body里面的一个div元素,其宽度就是body的宽度。display: inline 以内联元素方式显示。内联元素特点:元素高度宽度均取决于元素内容的高度宽度display: inline-block 以内联块级的元素方式显示,同时具有块级和内联的属性display: none 隐藏元素浏览器的兼容性问题标准模式:通常在非IE低浏览器中。计算方法:占的空间的宽度=内容的宽度+左右内边距的宽度+左右边框的宽度+左右外边 距的宽度(margin + padding+ border+ content)怪异模式:怪异模式是指在IE6及更早的IE版本下盒模型的计算方 法:所占空间总宽度=内容+外边距( content+margin)他们之间的相同点和不同点其实也很容易看得出来:  相同点:都是由margin ,border,padding,content组成  不同点:计算宽/高度方法的不同,标准模式下盒子的总宽度是由margin,padding,border,content的相加得来;怪异模式下:总宽度是由content减去padding、border得来的。目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。