JavaScript进阶篇
文章平均质量分 66
四哥-云上
大学之道,在明明德,在亲民,在止于至善!
展开
-
2021年高级前端进阶之路
1.两边固定,中间自适应布局 2.js判断字符串中出现次数最多的字符 3.Vue.set的用法及场景 4.Vue自定义指令的钩子函数及使用场景 4.1 钩子函数:bind,inserted,update,componentUpdated,unbind) 4.2 函数参数:el,binding,vnode,oldVnode 4.3 使用场景:按钮级别的权限控制 5.Vue页面渲染过程 ( 5.1 加载文件执行顺序:1.打包配置位置;2.index.htm...原创 2021-10-15 17:28:14 · 1077 阅读 · 0 评论 -
JS规则 给变量取个名字(变量命名) 必须以字母、下划线或美元符号开头;区分大小写;不允许使用JS关键字或保留字
给变量取个名字(变量命名)我们为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。我们赶快给变量取个好名字吧!变量名字可以任意取,只不过取名字要遵循一些规则:1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。如下:正确: mysum原创 2016-06-12 09:13:24 · 5553 阅读 · 0 评论 -
JS规则 确定你的存在(变量声明) 声明变量语法: var 变量名; 一次声明多个,中间用逗号隔开var num1,mun2 ;
确定你的存在(变量声明)我们要使用盒子装东西,是不是先要找到盒子,那在编程中,这个过程叫声明变量,找盒子的动作,如何表示:声明变量语法: var 变量名; var就相当于找盒子的动作,在JavaScript中是关键字(即保留字),这个关键字的作用是声明变量,并为"变量"准备位置(即内存)。var mynum ; //声明一个变量mynum当然,我们可以原创 2016-06-12 09:20:53 · 2011 阅读 · 0 评论 -
JS规则 多样化的我(变量赋值)我们使用"="号给变量存储内容,你可以把任何东西存储在变量里,如数值、字符串、布尔值等,
多样化的我(变量赋值)我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢?我们使用"="号给变量存储内容,看下面的语句:var mynum = 5 ; //声明变量mynum并赋值。这个语句怎么读呢? 给变量mynum赋值,值为5。我们也可以这样写:var mynum; //声明变量mynummynum = 5 ; //给变原创 2016-06-12 09:26:32 · 178 阅读 · 0 评论 -
JS规则 表达出你的想法(表达式) 通常包括常数和变量 var num2 = num1+6;
表达出你的想法(表达式)表达式与数学中的定义相似,表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。我们先看看下面的JavaScript语句:生活中“再见”表达方法很多,如:英语(goodbye)、网络语(88)、肢体语(挥挥手)等。在JavaScript表达式无处不在,所以一定要知道可以表达哪些内容,看看下面几种情原创 2016-06-12 09:33:09 · 284 阅读 · 0 评论 -
JS规则 我还有其它用途( +号操作符)例如,算术操作符(+、-、*、/等),比较操作符(<、>、>=、<=等),逻辑操作符(&&、||、!)
我还有其它用途( +号操作符)操作符是用于在JavaScript中指定一定动作的符号。(1)操作符看下面这段JavaScript代码。sum = numa + numb;其中的"="和"+"都是操作符。JavaScript中还有很多这样的操作符,例如,算术操作符(+、-、*、/等),比较操作符(、>=、注意: “=” 操作符是赋值原创 2016-06-12 09:43:20 · 187 阅读 · 0 评论 -
JS规则 自加一,自减一 ( ++和- -) 【mynum = mynum + 1;//等同于mynum++;】
自加一,自减一 ( ++和- -)算术操作符除了(+、-、*、/)外,还有两个非常常用的操作符,自加一“++”;自减一“--”。首先来看一个例子:mynum = 10;mynum++; //mynum的值变为11mynum--; //mynum的值又变回10上面的例子中,mynum++使mynum值在原基础上增加1,mynum--使mynum在原基础上减去1原创 2016-06-12 09:48:43 · 475 阅读 · 0 评论 -
JS规则 较量较量(比较操作符) 两个操作数通过比较操作符进行比较,得到值为真(true)和假(false)。【>; <; >=; <=; !=;==】
较量较量(比较操作符)我们先来做道数学题,数学考试成绩中,小明考了90分,小红考了95分,问谁考的分数高?答: 因为“95 > 90”,所以小红考试成绩高。其中大于号">" 就是比较操作符,小红考试成绩和小明考试成绩就是操作数,并且是两个操作数。也就是说两个操作数通过比较操作符进行比较,得到值为真(true)和假(false)。在JavaScript中,这样的原创 2016-06-12 09:57:35 · 251 阅读 · 0 评论 -
JS规则 我与你同在(逻辑与操作符)数学中的“b大于a,b小于c”是“a<b<c”,那么在JavaScript中可以用&&表示
我与你同在(逻辑与操作符)数学里面的“a>b”,在JavaScript中还表示为a>b;数学中的“b大于a,b小于c”是“ab>a && b//“&&”是并且的意思, 读法"b大于a"并且" b小于c "好比我们参加高考时,在进入考场前,必须出示准考证和身份证,两者缺一不可,否则不能参加考试,表示如下:if(有准考证 &&有身份证) { 进行考场原创 2016-06-12 10:03:08 · 935 阅读 · 0 评论 -
JS规则 我或你都可以 (逻辑或操作符)||逻辑或操作符,相当于生活中的“或者”,当两个条件中有任一个条件满足,“逻辑或”的运算结果就为“真”
我或你都可以 (逻辑或操作符)"||"逻辑或操作符,相当于生活中的“或者”,当两个条件中有任一个条件满足,“逻辑或”的运算结果就为“真”。例如:本周我们计划出游,可是周一至周五工作,所以周六或者周日哪天去都可以。即两天中只要有一天有空,就可以出游了。var a=3;var b=5;var c;c=b>a ||a>b; //b>a是true,a>b是false原创 2016-06-12 10:10:35 · 502 阅读 · 0 评论 -
JS规则 是非颠倒(逻辑非操作符)"!"是逻辑非操作符,也就是"不是"的意思,非真即假,非假即真
是非颠倒(逻辑非操作符)"!"是逻辑非操作符,也就是"不是"的意思,非真即假,非假即真。好比小华今天买了一个杯子,小明说:"杯子是白色的",小亮说:“杯子是红色的”,小华说:"小明说的不是真话,小亮说的不是假话"。猜猜小华买的什么颜色的杯子,答案:红色杯子。逻辑非操作符值表:看看下面代码,变量c的值是什么:var a=3;var b=5;var原创 2016-06-12 10:15:09 · 1056 阅读 · 0 评论 -
JS规则 保持先后顺序(操作符优先级)操作符之间的优先级(高到低): 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
保持先后顺序(操作符优先级)我们都知道,除法、乘法等操作符的优先级比加法和减法高,例如:var numa=3;var numb=6jq= numa + 30 / 2 - numb * 3; // 结果为0如果我们要改变运算顺序,需添加括号的方法来改变优先级:var numa=3;var numb=6jq= ((numa + 30) / (2 -原创 2016-06-12 10:22:25 · 353 阅读 · 0 评论 -
JS规则 编程练习 考考大家的数学,计算以下计算公式的结果。然后在浏览器中运行一下,看看结果是否跟你的结果一致。
编程练习 考考大家的数学,计算以下计算公式的结果。然后在浏览器中运行一下,看看结果是否跟你的结果一致。任务第一步: 在 ? 处填写你的答案。第二步: 填写完成后,运行一下,看看是不是跟你填写的结果一致。第三步: 如果你有不一致的地方,思考一下为什么跟你的不一致呢。JS基础 var a,b,sum;原创 2016-06-12 10:48:52 · 201 阅读 · 0 评论 -
JS数组 一起组团(什么是数组)一个数组变量可以存放多个数据
一起组团(什么是数组)我们知道变量用来存储数据,一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦。我们用数组解决问题,一个数组变量可以存放多个数据。好比一个团,团里有很多人,如下我们使用数组存储5个学生成绩。数组是一个值的集合,每个值都有一个索引号,从0开始,每个索原创 2016-06-12 11:10:24 · 1171 阅读 · 0 评论 -
JS数组 组团(如何创建数组)var mychar = new Array( )
组团,并给团取个名(如何创建数组)使用数组之前首先要创建,而且需要把数组本身赋至一个变量。好比我们出游,要组团,并给团定个名字“云南之旅”。创建数组语法:var myarray=new Array(); 我们创建数组的同时,还可以为数组指定长度,长度可任意指定。var myarray= new Array(8); //创建数组,存原创 2016-06-12 11:15:10 · 316 阅读 · 0 评论 -
JS数组 谁是团里成员(数组赋值)var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
谁是团里成员(数组赋值)数组创建好,接下来我们为数组赋值。我们把数组看似旅游团的大巴车,大巴车里有很多位置,每个位置都有一个号码,顾客要坐在哪个位置呢? 第一步:组个大巴车第二步:按票对号入座 大巴车的1号座位是张三 大巴车的2号座位是李四数组的表达方式:第一步:创建数组var myarr=new Array(); 第二步:给数组原创 2016-06-12 11:22:56 · 281 阅读 · 0 评论 -
JS数组 团里添加新成员(向数组增加一个新元素)只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素。myarray[5]=88;
团里添加新成员(向数组增加一个新元素)上一节中,我们使用myarray变量存储了5个人的成绩,现在多出一个人的成绩,如何存储呢? 只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素。myarray[5]=88; //使用一个新索引,为数组增加一个新元素任务数组中已有三个数值88,90,68,为数组新增加一个元素(第四个),值为99原创 2016-06-12 11:29:43 · 452 阅读 · 0 评论 -
JS数组 呼叫团里成员(使用数组元素) myarray[0]
呼叫团里成员(使用数组元素)我们知道数组中的每个值有一个索引号,从0开始,如下图, myarray变量存储6个人的成绩: 要得到一个数组元素的值,只需引用数组变量并提供一个索引,如:第一个人的成绩表示方法:myarray[0]第三个人的成绩表示方法: myarray[2] 任务变量myarr保存4个人的姓名,现在看看第二个人的姓名原创 2016-06-12 11:32:46 · 174 阅读 · 0 评论 -
JS数组 了解成员数量(数组属性length) myarr.length
了解成员数量(数组属性length)如果我们想知道数组的大小,只需引用数组的一个属性length。Length属性表示数组的长度,即数组中元素的个数。语法:myarray.length; //获得数组myarray的长度注意:因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。如数组的长度是5,数组的上下限分别是0和4。var ar原创 2016-06-12 11:52:18 · 980 阅读 · 0 评论 -
JS数组 二维数组 二维数组的表示 方法一: myarray[ ][ ];方法二:var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3, ]]
二维数组一维数组,我们看成一组盒子,每个盒子只能放一个内容。一维数组的表示: myarray[ ]二维数组,我们看成一组盒子,不过每个盒子里还可以放多个盒子。二维数组的表示: myarray[ ][ ]注意: 二维数组的两个维度的索引值也是从0开始,两个维度的最后一个索引值为长度-1。 1. 二维数组的定义方法一var myarr=new Arr原创 2016-06-12 12:55:40 · 985 阅读 · 0 评论 -
JS数组 编程练习 使用Javascript语言,把以下数组 在页面显示如下图所示的图案
编程练习使用Javascript语言,把以下数组 var arr = ['*','##',"***","&&","****","##*"]; arr[7] = "**";在页面显示如下图所示的图案:********** 任务第一步:定义一个数组,存储要展示的图形。提示: var原创 2016-06-12 13:09:45 · 1159 阅读 · 0 评论 -
JS流程控制语句 做判断(if语句)if语句是基于条件成立才执行相应代码时使用的语句。语法:if(条件) { 条件成立时执行代码}
做判断(if语句)if语句是基于条件成立才执行相应代码时使用的语句。语法:if(条件){ 条件成立时执行代码}注意:if小写,大写字母(IF)会出错!假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司。代码表示如下: var mycarrer = "HTML"; if (mycarrer == "H原创 2016-06-13 09:11:26 · 679 阅读 · 0 评论 -
JS流程控制语句 二选一 (if...else语句) 语法: if(条件) { 条件成立时执行的代码} else {条件不成立时执行的代码}
二选一 (if...else语句)if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。语法:if(条件){ 条件成立时执行的代码}else{条件不成立时执行的代码}假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司,否则你面试不成功,不能加入公司。代码表示如下:原创 2016-06-13 09:11:51 · 1146 阅读 · 0 评论 -
JS流程控制语句 多重判断满足你各种需求 要在多组语句中选择一组来执行,使用if..else嵌套语句。
多重判断(if..else嵌套语句)要在多组语句中选择一组来执行,使用if..else嵌套语句。语法:if(条件1){ 条件1成立时执行的代码}else if(条件2){ 条件2成立时执行的代码}...else if(条件n){ 条件n成立时执行的代码}else{ 条件1、2至n不成立时执行的代码}假设数学考试,小明考了86分,给他做原创 2016-06-13 09:12:19 · 284 阅读 · 0 评论 -
JS流程控制语句 多种选择(Switch语句) 当有很多种选项的时候,switch比if else使用更方便。
多种选择(Switch语句)当有很多种选项的时候,switch比if else使用更方便。语法:switch(表达式){case值1: 执行代码块 1 break;case值2: 执行代码块 2 break;...case值n: 执行代码块 n break;default: 与 case值1 、 case值2...case值n原创 2016-06-13 09:12:54 · 372 阅读 · 0 评论 -
JS流程控制语句 重复重复(for循环)语句结构: for(初始化变量;循环条件;循环迭代) { 循环语句 }
重复重复(for循环)很多事情不只是做一次,要重复做。如打印10份试卷,每次打印一份,重复这个动作,直到打印完成。这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码。for语句结构:for(初始化变量;循环条件;循环迭代){ 循环语句 }假如,一个盒子里有6个球,我们每次取一个,重复从盒中取出球,直到球取完为止。原创 2016-06-13 09:13:16 · 414 阅读 · 0 评论 -
JS流程控制语句 反反复复(while循环) 和for循环有相同功能的还有while循环, while循环重复执行一段代码,直到某个条件不再满足。
反反复复(while循环)和for循环有相同功能的还有while循环, while循环重复执行一段代码,直到某个条件不再满足。while语句结构:while(判断条件){ 循环语句 }使用while循环,完成从盒子里取球的动作,每次取一个,共6个球。var num=0; //初始化值while (num//条件判断{ do原创 2016-06-13 09:13:49 · 936 阅读 · 0 评论 -
JS流程控制语句 来来回回(Do...while循环) 先执行后判断 do while结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次。
来来回回(Do...while循环)do while结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次。因为它是先执行代码,后判断条件,如果条件为真,继续循环。do...while语句结构:do{ 循环语句 }while(判断条件)我们试着输出5个数字。 num= 1; do { docume原创 2016-06-13 09:14:19 · 812 阅读 · 0 评论 -
JS流程控制语句 退出循环break 在while、for、do...while、while循环中使用break语句退出当前循环,直接执行后面的代码。
退出循环break在while、for、do...while、while循环中使用break语句退出当前循环,直接执行后面的代码。格式如下:for(初始条件;判断条件;循环后条件值更新){ if(特殊情况) {break;} 循环代码}当遇到特殊情况的时候,循环就会立即结束。看看下面的例子,输出10个数,如果数值为5,就停止输出。原创 2016-06-13 09:14:43 · 501 阅读 · 0 评论 -
JS流程控制语句 继续循环continue continue的作用是仅仅跳过本次循环,而整个循环体继续执行。
继续循环continuecontinue的作用是仅仅跳过本次循环,而整个循环体继续执行。语句结构:for(初始条件;判断条件;循环后条件值更新){ if(特殊情况) { continue; } 循环代码}上面的循环中,当特殊情况发生的时候,本次循环将被跳过,而后续的循环则不会受到影响。好比输出10个数字,如果数字为5就不输出了。原创 2016-06-13 09:15:05 · 393 阅读 · 0 评论 -
JS控制语句 编程练习 学生数据,分别是姓名、性别、年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。
编程练习在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名、性别、年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。学生信息如下: ('小A','女',21,'大一'), ('小B','男',23,'大三'), ('小C','男',24,'大四'), ('小D','女',21原创 2016-06-13 09:15:25 · 1411 阅读 · 0 评论 -
JS完美运动框架【利用了Json】
完美运动框架body,ul,li{ margin:0; padding:0;}ul,li{ list-style:none;}ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; border:4px solid #000; filter:alpha(opacity:30);原创 2016-06-13 09:15:55 · 224 阅读 · 0 评论 -
JS函数 函数的作用,可以写一次代码,然后反复地重用这个代码。
什么是函数函数的作用,可以写一次代码,然后反复地重用这个代码。如:我们要完成多组数和的功能。var sum; sum = 3+2;alert(sum);sum=7+8 ;alert(sum); .... //不停重复两行代码如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函原创 2016-06-14 08:55:22 · 169 阅读 · 0 评论 -
JS函数
定义函数如何定义一个函数呢?看看下面的格式:function 函数名( ){ 函数体;}function定义函数的关键字,“函数名”你为函数取的名字,“函数体”替换为完成特定功能的代码。我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字:“add2”,代码如下: function add2(){ sum =原创 2016-06-14 08:59:06 · 146 阅读 · 0 评论 -
JS函数 函数调用 函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。
函数调用函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。第一种情况:在标签内调用。 function add2() { sum = 1 + 1; alert(sum); } add2();//调用函数,直接写函数名。第二种情况:在HTML文件中调用,如通过点击按钮后调原创 2016-06-14 09:06:11 · 1986 阅读 · 0 评论 -
JS函数 有参数的函数 参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开
有参数的函数上节中add2()函数不能实现任意指定两数相加。其实,定义函数还可以如下格式:function 函数名(参数1,参数2){ 函数代码}注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。按照这个格式,函数实现任意两个数的和应该写成:function add2(x,y){ sum = x + y;原创 2016-06-14 09:15:05 · 2542 阅读 · 0 评论 -
JS函数 返回值的函数 return sum;或者result = add2(3,4);
返回值的函数思考:上一节函数中,通过"document.write"把结果输出来,如果想对函数的结果进行处理怎么办呢?我们只要把"document.write(sum)"这行改成如下代码:function add2(x,y){ sum = x + y; return sum; //返回函数值,return后面的值叫做返回值。}还可以通过变原创 2016-06-14 09:35:12 · 495 阅读 · 0 评论 -
JS函数 编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数。
编程练习使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数。任务第一步: 编写代码完成一个函数的定义吧。第二步: 我们来补充函数体中的控制语句,完成函数功能吧。提示:再想一想,两个整数比较有三种情况,大于,等于或小于,所以我们需要控制语句判断(if...else if)。第三步: 写好的函数,我们就可以任意调原创 2016-06-14 09:55:51 · 960 阅读 · 0 评论 -
JS事件 什么是事件?JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
什么是事件JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。主要事件表:原创 2016-06-14 09:58:44 · 395 阅读 · 0 评论 -
JS事件 鼠标单击事件( onclick )通常与按钮一起使用。onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行
鼠标单击事件( onclick )onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。比如,我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add2()。代码如下: function add2(){ var numa,numb,su原创 2016-06-14 10:03:20 · 975 阅读 · 0 评论