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

个人介绍

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

感兴趣或擅长的领域

自动化运维、数据库、编程语言
个人勋章
TA还没获得勋章~
成长雷达
0
36
0
15
0

个人资料

个人介绍

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

感兴趣或擅长的领域

自动化运维、数据库、编程语言

达成规则

发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw53615092jQuery官网:https://jquery.com宗旨:write less, do more"$"美元符号,表示jQuery的缩写压缩版本适用于上线产品非压缩版本适合调试,一般用于开发过程中在lesson目录下使用命令koa2 jquery创建jquery项目进去jquery目录,安装需要的包cd jqueynpm install安装完脚手架后,使用npm start启动服务将下载的jquery.js拷贝至jquery--public--javascripts目录下打开layout.pug,引入jquery.js文件,为了不影响前端性能,js的引入放到页面底端layout.pugdoctype html html   head     title= title     link(rel='stylesheet', href='/stylesheets/style.css')   body     block content     script(src='/javascripts/jquery-3.2.1.js')     script(src='/javascripts/jq.js')index.pugextends layout block content   华为云在线教育平台当代码运行时,会先弹出alert,并且页面有字符串显示然后替换为classroom假如把引入的js放在头部doctype html html   head     title= title     link(rel='stylesheet', href='/stylesheets/style.css')     script(src='/javascripts/jquery-3.2.1.js')     script(src='/javascripts/jq.js')   body     block content当代码运行时,页面只有弹出框点击确定后,显示字符串,想实现的功能(用classroom代替华为云在线教育平台)没实现原因是,当js文件加载时,html元素被阻塞,js文件找不到html对应标签要使得功能正常实现,我们需要对代码进行改写,意味着当dom准备完成后再执行function中的代码alert("我是jq") $(document).ready(function() {     $("#name").html("classroom") })但是在代码执行过程中,只实现了替换,原始字符串并没有显示$(document).ready(function() {     $("#name").html("classroom") })可以简写为$(function(){     $("#name").html("classroom") })常使用的发送AJAX的方法1、get方法$.get(url,data,callback,type)url是请求的接口地址data是请求的参数callback是请求成功时的回调函数type是请求返回数据的格式除了url,其他三个参数如果没有可以省略注意的地方:请求参数的格式可以是json对象,也可以是字符串返回的数据格式可以是:JSON、HTML、Script、XML、Text等例题:修改jq.js的代码$(document).ready(function() {     $("#name").html("classroom")     $.get('/ajax', function() {         console.log(huawei)     }, 'script') })在app.js中增加代码app.use(async function(ctx) {     if (ctx.path == '/ajax') {         ctx.body = "var huawei ='华为云在线教育'"     } })2、post方法$.post(url,data,callback,type)url是请求的接口地址data是请求的参数callback是请求成功时的回调函数type是请求返回数据的格式除了url,其他三个参数如果没有可以省略注意的地方:post请求发出去的时候请求参数参数放在请求体中3、ajax方法ajax方法语法格式$.ajax(option)option是JSON格式的配置参数,用于设置ajax请求常用配置url:发送请求的地址type:请求方式(get or post等)data:请求参数dataType:返回的数据类型(json、html、xml等)success:请求成功后的回调函数error:请求失败后的回调函数complete:请求完成后的回调函数(不论成功与否都会执行)布尔类型的配置async:是否为异步请求cache:是否进行缓存(主要针对get请求)容易被忽视的配置项timeout:请求超时时间(毫秒)使用ajax方法实现上节的get方法修改jq.js代码$(document).ready(function() {     $("#name").html("classroom")     // $.get('/ajax', function() {     //     console.log(huawei)     // }, 'script')     $.ajax({         url: '/ajax',         dataType: 'script',         success: function() {             console.log(huawei)         }     }) })登录页面案例1、在lesson目录下,输入koa2 login创建项目login2、cd login,使用npm install安装相应的npm包          //可以简写为npm i启动项目npm start编辑首页index.pugextends layout block content   h1 登录华为账号   div 华为账号:     input(type='text' id='account')   div 账号密码:     input(type='password' id='pwd')   button(type='button' id='btn') 登录在public--javascripts目录下建立login.js文件,写入项目逻辑在layout.pug中引入js文件doctype html html   head     title= title     link(rel='stylesheet', href='/stylesheets/style.css')   body     block content     script(src='/javascripts/login.js')login.jsvar 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)     if (defaultParam.type == 'get') {         xhr.open(defaultParam.type, defaultParam.url + '?' + paramStr, defaultParam.async);         xhr.send()     } else {         xhr.open(defaultParam.type, defaultParam.url, defaultParam.async);         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);             }         }     } }最后在服务器端app.js添加代码//接口请求 app.use(async function(ctx) {     if (ctx.path == '/login') {         if (ctx.request.body.account == 'zhang' && ctx.request.body.pwd == '123') {             ctx.body = '登录成功!'         } else {             ctx.body = '登录失败!'         }     } })按着老师教的登录页面运行成功,还没完全理解运行机制和步骤,还需要多看几遍
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw53615092ajax 1、2、3章学习笔记同步和异步synchronous 简称 sync 代表同步asynchronous 简称async 代表异步XMLHttpRequest简称 XHR方法:open 初始化send 发送setRequestHeader Content-type属性:onreadystatechangereadyStatestatusresponseTextXMLHttpRequest的使用四步走: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)将项目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.jsajax比前面的课程感觉难了不少,照着老师讲的做,也没做明白,看来还的多看几遍课程,照着多做几遍
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw53615092JS第四、五、六章笔记1、删掉数组中指定元素要求将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后,形成一个不包含0的新数组和上面的筛选数组一样,将if中的条件换为arr != 0即可2、翻转数组将数组[1,2,3,4,5]的内容反过来放1、声明一个新数组newArr2、把旧数组索引号第4个取过来(arr.length - 1),给新数组索引号第0个元素(newArr.length)3、我们采取递减的方式 i--4、递增的方法也可以冒泡排序冒泡排序是一种算法,是把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)冒泡排序是一种简单的算法。它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。这个算法的名字由来是由因为越小的元素会经由交换慢慢“浮”到数列的顶端。[5,4,3,2,1]-->[1,2,3,4,5]1、一共需要的趟数,我们用外层for循环5个数据我们一共需要走4趟,长度就是arr.length - 12、每一趟交换次数,我们用里层for循环第一趟交换4次第二趟交换3次第三趟交换2次第四趟交换1次长度就是数组长度减去次数但是我们次数是从0开始的,所以,最终arr.length - i -13、交换2个变量就好了return使用注意事项1、return终止函数,return后面的代码不会被执行2、return只能返回一个值,返回的结果是最后一个值我们求任意两个数的加减乘除结果,可以利用数组return [num1 + num2, num1 - num2, num1 * num2, num1 / num2]3、我们的函数如果有return,则返回的是return后面的值,如果函数没有return,则返回的是undefinedfunction fun1() {    return 666; } console.log(fun1); //666function fun2() { } console.log(fun2); //undefinedbreak、continue、return的区别break:结束当前的循环体(如for,while)continue:跳出本次循环,继续执行下次循环(如for,while)return:不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码arguments的使用当我们不确定有多少个参数传递的时候,可以用arguments来获取。在JavaScript中,arguments实际上是当前函数的一个内置对象。所有的函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。arguments展示形式是一个伪数组,因此可以遍历。伪数组具有以下特点:1、具有length属性;2、按索引方式存储数据;3、不具有数组的push、pop等方法函数的两种声明方式1、利用函数关键字自定义函数(命名函数)function fn() {}2、函数表达式(匿名函数)var 变量名 = function() {};var fun = function(aru) {console.log('我是函数表达式');console.log(aru);};fun(aru);fun是变量名,不是函数名函数表达式声明方式和声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数函数表达式也可以传递参数作用域1、JavaScript作用域:就是代码名字(变量)在某个范围内起作用和效果,目的是为了提高程序的可靠性和减少命名冲突2、JS的作用域(es6之前):全局作用域、局部作用域全局作用域:整个script标签,或者是一个单独的js文件局部作用域(函数作用域):这个代码的名字只在函数内部起效果和作用变量的作用域根据作用域的不同,我们变量分为全局变量和局部变量1、全局变量:在全局作用域下的变量,在全局下都可以使用注意:如果在函数内部,没有声明,直接赋值的变量也属于全局变量2、局部变量:在局部作用域下的变量,或者在函数内部的变量,只能在局部使用注意:函数的形参也可以看做是局部变量3、从执行效率看全局变量和局部变量全局变量只有浏览器关闭的时候才会销毁,比较浪费资源局部变量当我们程序执行完毕就会销毁,比较节省资源JS现阶段没有块级作用域,在es6的时候新增了块级作用域{}作用域链只要是代码,就至少有一个作用域;写在函数内部的局部作用域;如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域;根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链。预解析JavaScript代码是由浏览器中的JavaScript解析器来执行的。1、JavaScript解析器在运行js代码的时候分两步:预解析和代码执行预解析:js引擎会把js里面所有的var还有function提升到当前作用域的最前面代码执行:按照代码书写的顺序从上往下执行2、预解析分为 变量预解析(变量提升)和函数预解析(函数提升)a、变量提升就是把所有变量声明提升到当前的作用域最前面,不提升赋值操作b、函数提升就是把所有的函数声明提升到当前作用域的最前面,不调用函数JavaScript对象什么是对象?万物皆对象,对象是一个具体的事物,看得见,摸得着的实物。例如:一本书、一辆汽车、一个人可以是对象,一个数据库、一张网页、一个与远程服务器的连接也可以是对象。在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的实物都是对象,例如字符串、数值、数组、函数等。对象是由属性和方法组成的属性:事物的特征,在对象中用属性来表示(常用名词)方法:事物的行为,在对象中用方法来表示(常用动词)为什么需要对象?保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果保存一个人的完整信息呢?对象可以让结构更清晰,让数据的一目了然。创建对象的三种方式1、利用字面量创建对象对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法var obj = {}; //创建了一个空对象对象的属性或者方法我们采取键值对的形式 键 属性名: 值 属性值多个属性或者方法中间用逗号隔开,最后一个可以不用逗号方法冒号后面跟的是一个匿名函数2、利用new Object创建对象var obj = new Object(); //创建了一个空的对象,记得O大写    obj.uname = '张三疯';    obj.age = 18;    obj.sex = '男';    obj.sayHi = function() {        console.log(‘Hi~’);    }我们利用等号赋值的方法,添加对象的属性和方法每个属性和方法之间用分号结束3、利用构造函数创建对象前面的两种创建方式一次只能创建一个对象,有大量的对象,创建起来就会很麻烦构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面构造函数的语法格式function 构造函数名() {this.属性 = 值;    //this 当前的this.方法 = function() {}}new 构造函数名();构造函数首字母要大写我们构造函数不需要return就可以返回结果我们调用构造函数,必须使用new我们只要new Star()调用函数就创建了一个对象我们的属性和方法前面必须添加this1、内置对象JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们JS独有的内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供一些常用的或是最基本而必要的功能(属性和方法)。内置对象最大的优点就是帮助我们快速开发,JS提供了多个内置对象:Math、Date、Array、String等2、查文档学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN、W3C来查询,推荐使用MDNMozilla开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括HTML、CSS和万维网及HTML5应用的API。MDN: https://developer.mozilla.org/zh-CN/如何学习对象中的方法a、查阅该方法的功能b、查看里面参数的意义和类型c、查看返回值得意义和类型d、通过demo进行测试3、Math对象Math数学对象,不是一个构造函数,不需要new来调用,而是直接使用里面的属性和方法console.log(Math.PI);//一个属性,圆周率console.log(Math.max(1, 99, 3)); //99console.log(Math.max(1, 99, 'abc')); //NaNconsole.log(Math.max()); //-Infinityconsole.log(Math.abs(-1)); //1console.log(Math.abs('-1')); //隐式转换,会把字符串型-1转换成数字型console.log(Math.abs('pink')); //NaNMath取整Math.floor() 向下取整console.log(Math.floor(1.9));//1Math.ceil() 向上取整console.log(Math.ceil(1.9));//2Math.round() 四舍五入console.log(Math.round(1.9));//2console.log(Math.round(1.1);//1console.log(Math.round(-1.5));//-1 其他数字都是四舍五入,但是.5特殊,它往大了取随机数方法Math.random()方法返回一个随机的小数,范围在[0,1)之间 0 = x 1;这个方法没有参数console.log(Math.random());随机返回一个整数的方法(得到两个数之间的随机整数,包含这两个整数)Math.floor(Math.random()*(max - min + 1)) + min;随机点名猜数字游戏1、随机生成一个1~10的整数,我们需要用到Math.random()方法2、需要一直猜到正确为止,所以一直循环3、用while循环合适。更简单4、核心算法:使用if else if多分支语句来判断大于、等于、小于4、日期对象Date() 日期对象,是一个构造函数,必须使用new来调用创建我们的日期对象var arr = new Array(); //创建一个数组对象var obj = new Object();//创建一个对象实例a、使用Date,如果没有参数,返回当前系统的当前时间var now = new Date();console.log(now);//返回当前时间b、参数常用写法数字型 2010, 7, 25字符串型'2020-7-25 8:8:8'var date1 = new Date(2020, 7, 25);console.log(date1); //Tue Aug 25 2020 00:00:00 GMT+0800 (中国标准时间),比要求输出的大一个月var date2 = new Date('2020-7-25 8:8:8');console.log(date2);//2020-7-25 8:8:8c、日期格式化格式化年月日格式化时分秒//封装一个函数,返回当前的时分秒d、获取日期总的毫秒数Date对象是基于1970年1月1日(世界标准时间)起的毫秒数,时间戳e、倒计时案例核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时,但是不能拿着时分秒相减,例如03分减去24分,结果会是负数用时间戳来做,用用户输入时间的总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数把剩余时间总的毫秒数转换为天、时、分、秒转换公式如下d = parseInt(总秒数/60/60/24); //计算天数h = parseInt(总秒数/60/60%24); //计算小时m = parseInt(总秒数/60%60); //计算分数s = parseInt(总秒数%60);//计算秒数5、数组对象创建数组的两种方式a、利用数组字面量var arr = [1,2,3];console.log(arr[1]);b、利用new Array()var arr1 = new Array();//创建了一个空数组var arr2 = new Array(2);//创建了一个长度为2的空数组var arr2 = new Array(2,3);//创建了一个数组元素为2和3的数组下面的翻转数组中使用了检测参数是否为数组的方法添加删除数组元素的方法a、push()在我们数组的末尾,添加一个或多个数组元素var arr = [1,2,3];arr.push(4,5);console.log(arr.push(4,5));//5console.log(arr);//[1,2,3,4,5]push是可以给数组追加新的元素push()参数直接写数组元素就可以push完毕后,返回的结果是新数组的长度b、unshift()在我们数组的开头,添加一个或多个数组元素c、pop()可以删除数组的最后一个参数pop完毕后,返回的结果是删除的那个元素d、shift()可以删除数组的第一个参数数组排序数组索引方法数组去重案例(重点)目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个核心算法:我们遍历旧数组,然后拿旧数组元素去查询新数组,如果该元素在新数组中,则添加,否则不添加我们怎么知道该元素有没有存在,利用新数组.indexOf(数组元素),如果返回-1,说明不存在封装一个去重的函数unique数组转换为字符串concat();连接两个或多个数组,不影响原数组,返回一个新数组slice():数组截取slice(begin,end),返回被截取项目的新数组splice();数组删除splice(第几个开始,要删除个数),返回被删除项目的新数组,这个会影响原数组slice和splice的目的基本相同,建议重点掌握splice()6、字符串对象为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String、Number和Boolean基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。//下面代码有什么问题?var str = 'andy'; console.log(str.length);按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为js会把基本数据类型包装为复杂数据类型,其执行过程如下//把简单数据类型包装为复杂数据类型 var temp = new String('andy'); //把临时变量的值给str str = temp; //销毁这个临时变量 temp = null;字符串的不可变因为我们字符串的不可变,所以不要大量的拼接字符串,不可变指的是,虽然看上去可以改变内容,但其实地址变了,内存中新开辟了一个内存空间。str = 'andy'str = 'tom'根据字符返回位置字符串所有的方法,都不会改变字符串本身(字符串是不可变得),操作完成会返回一个新的字符串案例:查找字符串'abcoefoxyozzopp'中所有o出现的位置及次数核心算法:先查找第一个o出现的位置然后,只要indexOf返回的结果不是-1就继续往后查找因为indexOf只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找根据位置返回字符(重点)charAt(index):返回指定位置的字符(index字符串的索引号),str.charAt(0);charCodeAt(index):获取指定位置处字符的ASCII码(index索引号),str.charCodeAt(0);str[index]获取指定位置处字符,HTML5,IE8+支持和charAt()等效统计出现最多的字符和次数判断字符串'abcoefoxyozzopp'中出现次数最多的字符,并计算其次数核心算法:利用charAt(),遍历这个字符串把每个字符串都存储给对象,如果字符串没有该属性,就为1,如果存在就+1遍历对象,得到最大值和该字符字符串操作方法concat(str1,str2,str3...):concat()方法用于连接两个或多个字符串,等效于+,+更常用substr(start,length):从start位置开始(索引号),length取得个数,相当于数组中的spliceslice(start,end):从start位置开始,截取到end,end取不到(start和end都是索引号)sunstring(start,end):从start开始,截取到end位置,end取不到,基本和slice相同,但是不接受负值replace('被替换的字符','替换为的字符'),它只会替换第一个字符假如替换多个字符,用循环实现字符转换为数组 split('分隔符'),前面我们学过join把数组转换为字符串toUpperCase():转换大写toLowerCase():转换小写7、简单数据类型与复杂数据类型简单数据类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫值类型string、number、boolean、undefined、nullnull返回的是一个空的对象 object,如果有个变量我们以后打算存储为对象,暂时没想好,用null引用类型:复杂数据类型,在存储时,变量中存储的仅仅是地址(引用),因此叫做引用数据类型通过new关键字创建的对象(系统对象、自定义对象),如Object、Array、Date等简单数据类型放在栈里,在内存里面直接开辟一个空间存放值复杂数据类型首先在栈里面存放地址(16进制表示)真正的数据放在堆里。简单类型传参函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到外部变量复杂类型传参函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象一周的笔记太长,从中节选了点比较重要的上传于此,课程的内容通俗易懂,讲的很不错,做起题来,一做就错,惨不忍睹,看来只有通过多练习,才能真正掌握。
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw53615092流程控制笔记流程控制1、流程控制在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行。流程控制主要有三种结构:顺序结构、分支结构、循环结构2、顺序结构顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数代码都是这样执行的。3、分支结构由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。js提供了两种分支语句if和switch3.1、if语句语句可以理解为一个行为,循环语句和分支语句就是典型的语句。一个程序由很多个语句组成,一般情况下,会分割成一个一个的语句。语法结构:if (条件表达式) {//条件成立执行的代码语句;}执行思路:如果if条件表达式为真,执行花括号内语句,否则,执行if语句后面的代码代码体验案例弹出一个输入框,用户输入年龄,年龄大于18,允许3.2 if else语句语法结构:if 如果 else 否则if (条件表达式) {//执行语句1;} else {//执行语句2;}if里面的语句1和else里面的语句2最终只能有一个语句执行,else后面直接跟大括号判断闰年接收用户输入的年份,闰年就弹出闰年,不是闰年弹出平年算法:能被4整除且不能被100整除的为闰年或者能被400整除的就是闰年3.3 if else if语句多分支语句,就是利用多个条件来选择不同的语句执行,得到不同的结果,多选1的过程语法规范:if (条件表达式1) {//执行语句1;} else if (条件表达式2) {//执行语句2;} else if (条件表达式3) {//执行语句3;} else {//最后的语句;}注意点:多分支语句还是多选1,最后只能有1个语句执行else if里面的条件理论上可以任意多个else if之间的空格不要忘记案例:按照从大到小判断的思路,不满足大则自然会到下一个判断条件弹出prompt输入框,让用户输入分数,把这个值取过来保存到变量中使用多分支if else if语句来分别判断输出不同的值3.4 三元表达式有三元运算符组成的式子我们称为三元表达式,简化版的if else语法结构:条件表达式?表达式1:表达式2执行思路:如果条件表达式结果为真,返回表达式1的值,否则返回表达式2的值案例:数字补0用户输入数字,如果数字小于10,则在前面补0,如果数字大于10 ,则不需要补3.5 switch语句switch语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用switch。语法结构:switch 转换、开关 ,case 小例子或者选项的意思执行思路:利用我们表达式的值和case后面的选项值相匹配,如果匹配上,就执行里面的语句,都匹配不上,执行default里的语句switch (表达式) {case value1:执行语句1;break;case value2:执行语句;break;case value3:执行语句3;break;...default:执行最后的语句;}案例switch注意事项:1、我们开发里面,表达式我们通常写成变量2、变量的值和case里的值匹配的时候是全等===,必须是值和类型都匹配3、break如果当前case里没有break,则不会退出switch,是继续执行下一个caseswitch和if else if语句的区别1、一般情况下,可以互相替换2、switch...case语句通常处理case为比较确定值的情况,而if...else...语句更加灵活,常用于范围判断(大于、等于某个范围)3、switch语句进行条件判断后直接执行到程序的对应语句,效率更高。而if...else是顺序判断4、分支较少时,if...else语句的执行效率比较高5、当分支比较多时,switch语句的执行效率比较高,而且结构更清晰4、循环结构循环的目的:可以重复执行某些代码在实际问题中,有许多具有规律行的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句。JS中的循环for循环、while循环、do while循环4.1 for循环在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称为循环语句。for 重复执行某些代码,通常和计数有关系语法结构:for (初始化变量;条件表达式;操作表达式) {//循环体}初始化变量:就是用var声明的一个普通变量,通常用于作为计数器使用条件表达式:就是用来决定每一次循环是否继续执行 就是终止的条件操作表达式:就是每次循环最后执行的代码,经常用于我们计数器变量的更新(递增或递减)执行过程:1、首先执行计数器变量 var i = 1,但是这句话在for里只执行一次2、去i = 100来判断是否满足条件,如果满足条件,就去执行循环体,不满足退出循环3、最后去执行i++,i++是单独写的代码,递增4、接着在第二步和第三步之间循环判断,递增直到不满足条件,跳出循环断点调试:断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。断点测试可以帮我们观察程序的运行过程浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点watch:监视,通过watch可以监视变量的值得变化F11:程序单步执行,这个时候,可观察watch中变量得变化代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。扩展for循环重复不相同的代码(因为i的存在)for循环和if语句结合for循环重复某些相同操作求1~100之间所有整数的和案例:求学生成绩1、弹出输入框输入总的班级人数(num)2、依次输入学生的成绩(保存起来score),此时我们需要用到for循环,弹出的次数跟班级总人数有关系 条件表达式i = num3、进行业务处理:计算成绩。先求总成绩(sum),之后求平均成绩(average)4、弹出结果一行打印5颗星星4.2 双重for循环很多情况下,单层for循环并不能满足我们的需求,比如我们要打印一个5行5列的图形、打印一个倒直角三角形等,此时就可以通过魂环嵌套来实现。语法结构:for (外层的初始化变量;外层的条件表达式;外层的操作表达式) {for (内层的初始化变量;内层的条件表达式;内层的操作表达式) {//执行语句}}注意:我们可以把内层的循环看做外层循环的语句外层循环循环一次,内层循环循环全部代码验证:打印5行5列的★★★★★★★★★★★★★★★★★★★★★★★★★★打印n行n列的★打印倒三角九九乘法表1、一共有9行,但是每行的个数不一样,因此需要用到双重for循环2、外层的for循环控制行数i,循环9次,可以打印9行3、内层的for循环控制每行公式j4、核心算法:每一行公式的个数正好和行数一致,j = i//1 x 2 = 2//j + 'x' + i + '=' + i * j1x1=1 1x2=2 2x2=4 1x3=3 2x3=6 3x3=9 1x4=4 2x4=8 3x4=12 4x4=16 1x5=5 2x5=10 3x5=15 4x5=20 5x5=25 1x6=6 2x6=12 3x6=18 4x6=24 5x6=30 6x6=36 1x7=7 2x7=14 3x7=21 4x7=28 5x7=35 6x7=42 7x7=49 1x8=8 2x8=16 3x8=24 4x8=32 5x8=40 6x8=48 7x8=56 8x8=64 1x9=9 2x9=18 3x9=27 4x9=36 5x9=45 6x9=54 7x9=63 8x9=72 9x9=814.3 while循环while语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。语法结构:while (条件表达式) {//循环体代码}执行思路:1、先执行条件表达式,如果结果为true,则执行循环体代码;如果为false,则退出循环,执行后面代码2、执行循环体代码3、循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为false时,整个循环结束。4、里面应该也有计数器,初始化变量5、里面应该也有操作表达式,完成计数器的更新,防止死循环案例://打印人的一生,从1到100岁 //计算1到100之间所有的整数和//弹出一个提示框,你爱我吗? 如果输入我爱你,就提示结束,否则,一直询问    4.4 do while循环语法结构:do {//循环体;} while (条件表达式)执行思路:和while不同的是,do while先执行一次循环体,再判断条件,如果条件为真,则继续执行循环体,否则,退出循环体案例://打印人的一生//计算1到100之间所有的整数和//弹出一个提示框,你爱我吗? 如果输入我爱你,就提示结束,否则,一直询问循环小结1、JS中循环有for、while、do while2、三个循环很多情况下可以互换3、如果是用来计次数,跟数字相关的,三者使用基本相同,但是我们一般用for4、while和do...while可以用来做更复杂的判断条件,比for循环灵活一些5、while和do...while执行顺序不一样,while先判断后执行,do...while先执行一次,再判断执行6、实际工作中,我们更常用for循环语句4.5 continue和break关键字continue关键字用于跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)//求1~100之间,除了能被7整除之外的整数和break关键字用于立即跳出整个循环(循环结束)4.6 命名规范及语法格式标识符命名规范1、变量、函数的命名必须要有意义2、变量的名称一般用名词3、函数的名称一般用动词操作符命名规范操作符的左右两侧各保留一个空格这章练习较多,跟随课程,除了做笔记,也跟着做了全部的练习,学练结合,效果还不错。
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw53615092运算符学习笔记运算符运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:算术运算符、递增递减运算符、比较运算符、逻辑运算符、赋值运算符算术运算符:用于执行两个变量或值得算术运算。+加、-减、*乘、/除、%取余数需要注意的事项:1、% 取余(取模),判断一个数是否可以被整除console.log(4 % 2); //0console.log(3 % 5); //32\浮点数在算术运算中会有问题,计算过程中会先转换为二进制,所以有误差出现console.log(0.1 + 0.2);  // 0.30000000000000004 不够精确,有误差,尽量避免用浮点数直接计算。3、我们不能直接拿着浮点数来进行比较是否相等var num = 0.1 + 0.2;console.log(num == 0.3); //false表达式和返回值:表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合。返回值:表达式就算的结果即为返回值简单理解:是由数字、运算符、变量等组成的句子。在我们程序里面,把我们右边表达式计算完毕,把返回值给左边。var num = 1 + 1;递增和递减运算符如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(--)运算符来完成在JavaScript中,递增(++)和递减(--)既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。注意:递增和递减运算符必须和变量配合使用1、变量给自己加1var num = 1;num = num + 1; //++num2、前置递增运算符 ++写在变量前var age = 10;++age; //类似于age = age + 1先变量加1,后表达式返回值var p = 10;console.log(++p + 10);//213、后置递增运算符 ++写在变量后var age = 10;num++;console.log(num);//11前置自增和后置自增如果单独使用,效果是一样的后置自增,先表达式返回原值,后变量加1var age = 10;console.log(age++ +10);//20练习    小结:前置递增和后置递增运算符可以简化代码的编写,让变量的值+1比以前的写法更简单单独使用时,运行结果相同与其他代码联用时,执行结果会不同后置:先原值运算,后自加前置:先自加,后运算开发时,大多采用后置递增/减,并且代码独占一行,例如:num++;num--比较运算符比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果。小于号、>大于号、>=大于等于号、=小于等于号、==判等号(会转型)、!=不等号、===全等号,要求值和数据类型都一致、!==不全等于1、我们程序里面的等于符号,是==,默认转化数据类型,会把字符串类型的数据转换为数字型console.log(18 == '18'); // true2、我们的全等===,要求两侧的值和数据类型完全一致console.log(18 === '18'); // false逻辑运算符逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。开发中常用作多个条件的判断。&&逻辑与,||逻辑或,!逻辑非true && true  true;     true && false falsetrue || false true;     false || false false短路运算(逻辑中断):当有多个表达式(值)时,左边的表达式值可以确定结果时,就不在继续运算右边的表达式值。1、逻辑与语法:表达式1 && 表达式2如果第一个表达式为真,则返回表达式2如果第一个表达式为假,则放回表达式1console.log(123 && 456); //456console.log(0 && 456); //0console.log('' && 123 + 234 && 456 * 789); //''2、逻辑或如果第一个表达式为真,则返回表达式1如果第一个表达式为假,则放回表达式2console.log(123 || 456); //123console.log(123 || 456 || 789 + 123); //123console.log(0 || 456 || 789 + 123); //456例题:结果为123和0,逻辑或截断,num++没执行,所以num还为0赋值运算符用来把数据赋值给变量的运算符=直接赋值,+=、-=加减一个数后再赋值,*=、/=,%=乘、除、取模后再等于var num = 10;num = num + 1; //num++num = num + 2;//num += 2var age = 2;age *= 3console.log(age);//6运算符优先级1、小括号 ()2、一元运算符 ++、 -- 、!3、算数运算符 先* / %后+ -4、关系运算符 > 、>=、 、=5、相等运算符 ==、!=、===、!==6、逻辑运算符 先&&后||7、赋值运算符 =8、逗号运算符 ,习题这章的重点难点就在递增递减运算符上,a++,a--,++a,--a组合在一起很烧脑,另外就是短路运算,一不小心就被弄混了。
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw53615092数据类型学习笔记1、编程语言1.1 编程编程:就是让计算机为解决某个问题而使用某种设计语言编写程序代码,并最终得到结果的过程。计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出指令。1.2 计算机语言计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介。计算机语言的种类非常的多,总的来说可以分为机器语言,汇编语言和高级语言三大类。实际上计算机最终执行的都是机器语言,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础。1.3 编程语言可以通过类似于人类语言的“语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言。编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守。如今通用的编程语言有两种形式:汇编语言和高级语言汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。1.4 翻译器高级语言所编制的程序不能直接被计算机识别,必须经过转换才能执行,为此,我们需要一个翻译器。翻译器可以将我们所编写的源代码转换为机器语言,这也被称为二进制化。1.5 编程语言和标记语言的区别编程语言有很强的逻辑和行为能力。在编程语言里,你会看到很多的if else、for、while等具有逻辑性和行为能力的指令,这是主动的。标记语言(HTML)不用向计算机发出指令,常用于格式化和链接。标记语言是用来被读取的,是被动的。2、计算机基础2.1 计算机的组成硬件和软件2.2  数据存储1、计算机内部使用二进制0和1来表示数据2、所有数据,包括文件、图片等最终都是二进制数据(0和1)的形式存放在硬盘中的2.3 数据存储单位位(bit):1bit可以保存1个0或者1(最小的存储单位)字节(Byte):1B=8bit千字节(KB):1KB=1024B兆字节(MB):1MB=1024KB吉字节(GB):1GB=1024MB太字节(TB):1TB=1024GB2.4 程序运行1、打开某个程序时,先从硬盘中把程序的代码加载到内存中2、CPU执行内存中的代码注意:之所以要内存的一个重要原因,是因为CPU运行太快了,如果只从硬盘中读数据,会浪费CPU性能,所以,才使用存取速度更快的内存来保存运行时的数据。(内存是电,硬盘是机械)3、初识JavaScript3.1 历史布兰登.艾奇3.2 JavaScript是什么世界上最流行的语言之一,是一种运行在客户端的脚本语言脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行现在也可以基于Node.js技术进行服务器端编程3.3 JavaScript的作用表单动态校验(密码强度检测)(js产生的最初的目的)网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js)3.4 HTML/CSS/JS的关系HTML/CSS标记语言--描述类语言HTML决定网页结构和内容(决定看到什么),相当于人的身体CSS决定网页呈现给用户的模样(决定好不好看),相当于给人穿衣服,化妆JS脚本语言--编程类语言实现业务逻辑和页面控制(决定功能),相当于人的各种动作3.5 浏览器执行JS简介浏览器分成两部分:渲染引擎和JS引擎渲染引擎:用来解析HTML和CSS,俗称内核,比如chrome浏览器的blink,老版本的webkitJS引擎:也成为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8浏览器本身并不会执行JS代码,而是通过内置的JavaScript引擎(解释器)来执行JS代码,JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。3.6 JS的组成ECMAScript:JavaScript语法DOM:页面文档对象模型BOM:浏览器对象模型ECMAScript是由ECMA国际(原欧洲计算机制造协会)进行标准化的一门语言,这种语言在万维网应用广泛,它往往被称为JavaScript(网景公司)或JScript(微软公司),但实际上后两者是ECMAScript语言的实现和扩展。ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。DOM:文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)BOM:浏览器对象模型(Browser Object Model),它提供了独立于内容的,可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。3.7 JS初体验1、行内式的js,直接写到元素的内部可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如:onclick注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号可读性差,在HTML中编写大量js代码时,不方便阅读引号易错,引号多层嵌套匹配时,非常容易弄混特殊情况下使用2、内嵌式的js可以将多行JS代码写到利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用引用外部JS文件的script标签中间不可以写代码适合于JS代码量比较大的情况4、JS注释5、JavaScript输入输出语句alert(msg):浏览器弹出警示框console.log(msg):浏览器控制台打印输出信息prompt(info):浏览器弹出输入框,用户可以输入4、变量4.1 变量概述1、什么是变量?白话:变量就是一个装东西的盒子通俗:变量是用于存放数据的容器,我们通过变量名获取数据,甚至数据可以修改。2、变量在内存中的存储本质:变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店房间,一个房间就可以看作是一个变量。每个房间对应一个变量名。4.2 变量的使用变量在使用时分为2步:1、声明变量。2、赋值1、声明变量var age; // 声明一个名称为age的变量var是一个JS关键字,用来申明变量(variable是变量的意思)。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管age是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间2、赋值age = 10;// 给age这个变量赋值为10=用来把右边的值赋给左边的变量空间中,此处代表赋值的意思变量值是程序员保存到变量空间的值3、变量的初始化var age = 18; //声明变量同时赋值18声明一个变量并赋值,我们称之为变量的初始化。4、变量案例弹出用户名4.3 变量语法扩展1、更新变量一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋值为准2、同时声明多个变量变量之间用英文的逗号隔开var age=18,address = '火影村',gz = 2000;3、声明变量的特殊情况//只声明不赋值  undefined 未定义的var sex;console.log(sex);// 不声明不赋值,直接使用某个变量,会报错console.log(tel);//不声明,直接赋值使用,可以使用,但不提倡qq = 110;console.log(qq);4.4 变量命名规范由字母、数字、下划线、美元符号组成严格区分大小写不能以数字开头不能是关键字、保留字变量名必须有意义遵守驼峰命名法,首字母小写,后面单词的首字母需要大写推荐翻译网站:有道、爱词霸www.iciba.comname在浏览器中一般有特殊含义,尽量不要直接使用name作为变量名。课堂案例交换两个变量的值:diagram designer常用的画图软件,可以通过画图查看之间的关系,帮助理解。5、数据类型5.1 数据类型简介1、为什么需要数据类型?在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。简单来说,数据类型就是数据的类别型号,比如:姓名“张三”,年龄18,这些数据的类型是不一样的,占用的空间也是不一样的。2、变量的数据类型变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说是动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。在代码运行时,变量的数据类型是由JS引擎根据=右边变量的数据类型来判断的,运行完毕之后,变量就确定了数据类型。JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型5.2 数据类型的分类1、简单数据类型(基本数据类型)Number:数字型,包含整型和浮点型,如21,0.21 默认值 0Boolean:布尔值类型,如true、false等价于1和0 默认值 falseString:字符串类型,如“张三”,注意在JS里,字符串都带引号 默认值 “”Undefined:var:a;声明了变量a,但是没有赋值,此时a=undefined 默认值 undefinedNull:var a=null;声明了a为空值  默认值 nulla1、数字型进制最常见的进制有二进制、八进制、十进制、十六进制现阶段我们只需要记住,在JS中八进制前面加0,十六进制前面加0xa2、数字型范围JavaScript中数值的最大值和最小值Number.MAX_VALUE,Number.MIN_VALUEa3、数字型三个特殊值Infinity,代表无穷大  //console.log(Number.MAX_VALUE*2); 最大值*2输出了无穷大-Infinity,代表无穷小NaN,Not a number,代表一个非数值isNaN() 这个方法用来判断非数字,并且返回一个值,如果是数字返回false,如果不是数字返回trueconsole.log(isNaN(11)); //falseb1、字符串型引号字符串型可以是引号中的任意文本,其语法为双引号""和单引号''var strMsg="我爱大前门";var strMsg2='老巴夺也不错';因为HTML标签里面的属性使用的是双引号,JS这里我们更推荐单引号引号嵌套JS可以用单引号嵌套双引号,也可以用双引号嵌套单引号(外双内单,外单内双)var strMsg2="我是'高富帅'的老郭";var strMsg2='我是"高富帅"的老郭';b2、字符串转义符类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。转义符都是以\开头的,转义字符需要写到引号里面,常见的转义符及其说明如下:\n 换行符,n是newline的意思\\ 斜杠\\‘ 单引号\" 双引号\t tab缩进\b 空格,b是blank的意思b3、字符串长度字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。var str='my name is andy';console.log(str.length(str)); //15b4、字符串拼接多个字符串之间可以使用+进行拼接,其拼接方式为:字符串+任何类型=拼接之后的新字符串,拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新字符串。+号口诀:数值相加,字符相连console.log('骆驼'+18); //骆驼18var age = 18;console.log('pink老师'+age+'岁'); //我们变量不要写到字符串里面,是通过和字符串相连的方式实现的我们经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值变量是不能添加引号的,因为加引号的变量会变成字符串如果变量两侧都有字符串拼接,口诀“引引加加”,删掉数字,加加写引号中间,变量写加中间例题:交互编程的三个基本要素:用户输入:弹出一个输入框,把用户输入的值放入到一个变量中程序内部处理:把变量和要输出的内容拼接,并放到另一个变量中输出结果:使用alert语句弹出警示框c、布尔型、undefined和null5.3 获取数据类型1、typeof可用来获取变量的数据类型haode2、我们还可以通过控制台中的颜色判断字符类型蓝色为数字类型,黑色为字符串类型,深蓝色为布尔型,undefinedh和null为浅灰色。3、字面量字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。数字字面量:8、9、10字符串字面量:‘黑马’,“大前端”布尔字面量:true,false5.4 数据类型的转换使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。1、转换为字符串toString():转成字符串,var num=1;alert(num.toString());String():强制转换成字符串,var num=1;alert(String(num));加号拼接字符串:和字符串拼接的结果都是字符串,var num=1;alert(num+"");三种转换方法,我们更喜欢第三种加号拼接字符串转换方式,这一种方法也称为隐性转换。2、转化为数字型parseInt(string):将string类型转换为整数数值型,parseInt("88")parseFloat(string):将string类型转换为浮点数数值型,parseFloat("78.21")Number():强制转换函数,将string强制转换为数值型,Number("12")js隐式转换:- * /,利用算数运算符隐式转换为数值型,“12”-0前两种方法为重点需要掌握的常用方法。例题:简单加法器案例3、转换为布尔型Boolean()5个false,'',0,NaN,null,undefined其余的为true5.5 扩展阅读1、解释型语言和编译型语言计算机不能直接理解任何除机器语言意外的语言,所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具,被称为翻译器。翻译器翻译的方式有两种:一个是编译,另外一个是解释。两种方式之间的区别在于翻译的时间点不同。编译器是在代码执行之前进行编译,生成中间代码文件解释器是在运行时进行及时解释,并立即执行(当编译器以解释方式运行的时候,也成为解释器)2、标识符、关键字、保留字标识符:就是指开发人员为变量、属性、函数、参数取得名字。不能是关键字和保留字关键字:就是JS本身已经使用了的字,不能再用他们充当变量名,方法名保留字:实际上就是预留的“关键字”,现在还不是关键字,但未来可能会是关键字。当出现红色波浪线时,说明该字符串不能使用。第一章都是基础概念,整个笔记记起来和抄书差不多,不过还好,记笔记的同时,加深一下记忆,基本知识扎实了,才能学好后续的课程