《javascript高级程序设计》读书小延伸

这本书已经读了几章了,想着试试能不能做出点东西,就简单的练了把手。觉得对于初学者,自己试着练练,效果还不错的。

挥刀要从轻的开始,起初的原因是和同事谈起曾经的逝水年华(小时候干的坏事)时说起了曾经的一篇课文,讲的是一个小朋友如何巧妙地从1到100累加起来的,猛然间我觉得可以用js算出来,说干就干。

function add(){
    for(var i = 1; i <= 100; i ++){
          var sum = 0;
          sum += i;
    }
    alert(sum);
}
add();

满心期待的点击运行,正打算欢呼之时,看到结果的那一刻整个人都石化了。结果居然是100,真是奇怪,仔细检查了下代码,发现犯了一个低级的错误,原来把sum声明在循环内了,这就相当于每循环一次,sum都被重新赋值为0,导致叠加变为了 sum = 0 + i ,并不是期望的那样,马虎。改吧,于是乎,把sum声明到了循环体外面,再次运行带到了想要的 5050 。

不过这并不能让我有太多的成就感,我们还可以把它变得更加智能。比如我想从2累加到10,那应该怎么办?想了下,加个参数就好了。

function add(a,b){
    var sum = 0;
    for(var i = a; i <= b; i ++){
          sum += i;
    }
    alert(sum);//54
}
add(2,10);

在纸上算了算,确实正确。但是这样我只能在代码中进行修改,能不能把它放到界面上,我想让它变得更加有活性,开始值和结束值要按照我的心情来,想让它是多少就是多少,写程序就是要这么任性。

<input type = "text"  id = "sum">
<input type = "button" value = "叠加" id = "click">

简单的做了一个文本框和一个点击按钮,期望在文本框中输入不同的数字,然后点击得到累加的结果。

var sum = document.getElementById(‘sum‘);
var click = document.getElementById(‘click‘);
click.addEventListener(‘click‘,function add(){
    var number = sum.value.split(",");//将输入的内容转化为数组(默认输入的2个数字用“,”来隔开,比如输入1,3)
    var c = 0;
    var a = number[0];
    var b = number[1];
    for(var i = parseInt(a); i <= parseInt(b); i ++){
         c +=i;
    }
    alert(c);
},false);

再写的时候第一想到的是获取到文本框中的字符串,然后再将其转换为数组,通过数组拿到想要的值。如果是空格隔开2个数字的话,可以在用“||”继续添加条件,目前我只能做到特定符号隔开的情况,对于随意输入还没有想到很好的解决办法。对于获得文本框中的的数字,可以在split()中使用正则匹配,比如还是“,”隔开的,改为“/,/”,就可以了。当然也可以用正则进行匹配。

var sum = document.getElementById(‘sum‘);
var click = document.getElementById(‘click‘);
click.addEventListener(‘click‘,function add(){
        var pattern = /(\d+),(\d+)/g;
        var c = 0;
        if(pattern.test(sum.value)){
           var a = RegExp.$1;
           var b = RegExp.$2;
    }
        for(var i = parseInt(a); i <= parseInt(b); i ++){
              c +=i;
    }
    alert(c);
},false);

简单的解释下,\d是是匹配的时候查找数字,\d+是匹配至少包含一个数字的字符串,(\d+)是一个捕获组,为了方便进行捕获和赋值。test()函数从字面意思也可看出他是为了检测是否匹配,返回值为true和false,RegExp.$1是获取第一个捕获组,RegExp.$2获取第二个捕获组,这样就很容易得到“,”两边的数字了。

其实无论是用split()还是使用正则,思路是一样的,可能还有更简单的方法,但是目前还没有想到。

这个也可以再继续往下去延伸,比如说我得到这些值后,不去做累加,而是做一些判断条件,就像登录和注册一样。我觉得这样在学习的过程中可以去联想下各种场景,试着写写,不会的就去查,进展可能会快一些。

时间: 2024-10-30 14:28:31

《javascript高级程序设计》读书小延伸的相关文章

Javascript高级程序设计读书笔记(第六章)

第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新对象. 构造函数的问题:每个方法都要在每个实例上重新创建一遍: 理解原型对象: 无论何时,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象.默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向proto

JavaScript高级程序设计-读书笔记(6)

第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l        简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null.但JSON不支持JavaScript中的特殊数值undefined. “Hello world!” l        对象(属性的值可以是简单值,也可以是复杂类型值,如下这样在对象嵌入对象) { “name” : ”Nicholas”, “age” : 29

JavaScript高级程序设计-读书笔记(2)

第6章 面向对象的程序设计 创建对象 1.最简单方式创建Object的实例,如 var person = new Object(); person.name = “Greg”; person.age = 27; person.job = ”Doctor”; person.sayName = function() { alert(this.name); }; person. sayName(): 缺点:会产生大量重复代码 2.工厂模式:用函数来封装以特定接口创建对象的细节,如 function c

JavaScript高级程序设计读书笔记之OOP

关于JavaScript创建对象的方式: 1.工厂模式 1 function createPerson(name, age, job){ 2 var o = new Object(); 3 o.name = name; 4 o.age = age; 5 o.job = job; 6 o.sayName = function(){ 7 alert(this.name); 8 }; 9 return o; 10 } 11 var person1 = createPerson("Nicholas&qu

javascript高级程序设计 读书笔记2

第五章 引用类型 对象是引用类型的实例,引用类型是一种数据结构,将数据和功能组织在一起.描述的是一类对象所具有的属性和方法.对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数俩创建的,构造函数本身就是一个函数,只不过该函数试处于创建新对象的目的而定义的.  eg:    var person = new Object(); 1.创建Object实例的方式有两种   一:new+Object 二:对象字面量 var person = new Object(); var pers

JavaScript高级程序设计-读书笔记(4)

第11章 DOM扩展 1.选择符API Selector API Level 1 的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Document及Element类型的实例调用它们.目前完全支持Selector API Level 1的浏览器有IE 8+. Firefox 3.5+. Safari 3.1+. Chrome和Opera 10+. querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,

JavaScript高级程序设计-读书笔记(3)

第8章 BOM 1.window对象 (1)全局作用域 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法. (2)窗口关系及框架 如果界面中包含框架,这每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数值的索引(从0开始,从左至右,从上到下)或者框架名称来访问相

JavaScript 高级程序设计读书笔记(1)

第6章 面向对象的程序设计 属性的类型 JS 中对象的属性有两种,数据属性和访问器属性(accessor property ),属性有其自身的特性(arrribute),可以理解为关于属性的属性. 数据属性包含4个特性,分别是[[Configurable]], [[Enumerable]], [[Writable]], [[Value]]. 使用 Object.defineProperty 修改属性描述符时,若该属性之前不存在,除了代码里指定的特性值,其他特性值默认将是 false, 举例如下:

javascript高级程序设计读书笔记2

<!DOCTYPE HTML>//这个网页的文档类型,这个是html5的写法Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype.因此这一文档类型必须出现在项目的每个页面的开始部分 <html lang="en">//这里的lang="en"可以删除,如果不删除的,用谷歌之类打开,它会认为是英文的,会自动给翻译(如果设置了自动翻译的话) 有两个版本的 jQuery 可供下载:Production ver

Javascript高级程序设计读书笔记(第二章)

第二章  在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到整个页面都解析完毕后再运行.相当于告诉浏览器立即下载,但延迟执行.HTML5规定要求脚本按照它们出现的先后顺序执行. 异步脚本(async)如果有多个脚本文件,执行顺序不确定,指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容. XHTML代码的规则比编写HTML严格得多,下面