javascript挑战编程技能-第二题：计算字符数

最新推荐文章于 2022-07-08 11:35:23 发布

chexuanjue1998

最新推荐文章于 2022-07-08 11:35:23 发布

阅读量103

点赞数

文章标签： javascript c/c++ ViewUI

原文链接：https://my.oschina.net/xiaohuoni/blog/1547943

版权

问题：创建一个程序，提示用户输入字符串，然后输出这个字符串以及其中包含的字符数。

要求：

1、确保输出中包含原始的字符串。

2、使用一个输出语句来构造输出。

3、使用javascript内置函数来确定字符串长度。

4、如果用户什么也没有输入，提示用户输入。

首先提一下第二点的要求，尽量把所有独立的方法构造成单独的函数，有利于后续理解函数式编程。

根据上一节课，我们知道了，在html中的输入使用input控件来实现，这节课我们依旧这么使用。

还是使用一个div作为输出控件。

接下来我们来实现这个简单的程序，代码如下：

<body>
<div>请输入一段字符:<input  id="inputString" type="text" onchange="inputChange()"></div>
<div id="errorString" style="color: red;display: none;">请在对话框中输入一段字符！</div>
<div ><span id="pointString"></span></div>
<script>
    function inputChange()
    {
        var inputString = document.getElementById("inputString").value
        var strLength = sumStringLength(inputString)
        if(strLength==0) document.getElementById("errorString").style.display="block"
        var pointString = inputString+"的字符数是"+strLength
        point(pointString,"pointString")
    }
    function sumStringLength(str)
    {
        return str.length
    }
    function point(str,elementId)
    {
        document.getElementById(elementId).innerHTML=str
    }
</script>
</body>

运行截图：

好了，到这里我们实现了题目的所有要求。

整个程序跑下来也没有任何异常。

可是我这里要说的是，这样一个程序，其实有非常多的错误。

这些错误不是指语法错误，而是指编程规范错误。

我从最开始学习c语言，我的老师就总是强调一句话：语言不是最重要的，最重要的是编程思想和编程规范。

我本来这节课要好好的提一下编程规范的事情，今天恰巧在阮一峰的博客中看到一篇文章javascript编程风格

强烈建议大家阅读。

下面是我修改后的代码，大家可以对比一下差别。

<body>
<div>请输入一段字符:<input  id="inputString" type="text" onchange="inputChange()"></div>
<div id="errorString" style="color: red;display: none;">请在对话框中输入一段字符！</div>
<div ><span id="pointString"></span></div>
<script>
    function sumStringLength(str) {
        return str.length;
    }
    function point(str,elementId) {
        document.getElementById(elementId).innerHTML=str;
    }
    function inputChange() {
        var inputString = document.getElementById("inputString").value;
        var strLength = sumStringLength(inputString);
        if(strLength==0){
            document.getElementById("errorString").style.display="block";
        }
        var pointString = inputString+"的字符数是"+strLength;
        point(pointString,"pointString");
    }
</script>
</body>

第二节课就到这里结束了。
有什么问题大家可以联系我本人，微信yu_xiaohu
希望大家关注我的个人公众号，有更新博客我会在上面给出通知。
我是小虎Oni，希望你开心。

转载于:https://my.oschina.net/xiaohuoni/blog/1547943

chexuanjue1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript挑战编程技能-第二题：计算字符数

问题：创建一个程序，提示用户输入字符串，然后输出这个字符串以及其中包含的字符数。要求： 1、确保输出中包含原始的字符串。 2、使用一个输出语句来构造输出。 3、使用javascript内置函数来确定字符串长度。 4、如果用户什么也没有输入，提示用户输入。首先提一下第二点的要求，...
复制链接

扫一扫