“授之以鱼” 不如 “授之以渔“（网页设计-第十次作业-思路分享）

一，为什么要写一篇思路分享的文章？

预料之外–阅读量上升

因为我将网页制作和java作业整理上传的CSDN的最初原因，是为了数据归档，当然也可以给有需要的朋友参考一下。之前看了一下，好像网页制作的作业有好几篇都有几十的浏览量，于是想了下，可能还是有一部分朋友需要参考我的作业的，于是后来上传的作业都写上了详细的注释。

授之以渔–尝试新的分享方式

但是，我又想了一下，增加了注释确实会加快对程序的理解，但是仅仅增加了注释，可能可以知其然，但很难知其所以然，于是想尝试一种新的分享方式。我知道可能很多人对网页设计可能根本就不感兴趣，所以此类文章应该是没多少人看的，但是也无所谓，我也就偶尔有时间就写一下。

思路分析–知其所以然

我也不确定我是否很清晰地描述我写代码的思路，但我会尽力去还原我是如何完成一次作业的。这样的话，也许就能让你们能理解为什么我要这样写，知其所以然。

二，开始分享（以网页设计-第十次作业为例子）

1 看题目

1.在一个有若干段落（不少于20个段落）的网页中，各段首行缩进2个字符；
2.页面底部两个
3.以统计页面正文总共有多少字符，并将结果用蓝色加粗字体显示在该按钮右侧120像素处。

首先，要明确一点，我是喜欢分文件写的，所以看题目可以大概提取出每个文件的要求。

html文件：a若干段落，b页面底部两个文本框，c两个按钮，“添加” 和 “统计字符数”
css文件：a各段首行缩进2字符，b结果蓝色加粗字体显示，在该按钮右侧120像素处
js文件：两个按钮点击事件，a一个点击后添加元素，b一个统计字数

2根据要求找解决方案

html文件

要求：a若干段落，b页面底部两个文本框，c两个按钮，“添加” 和 “统计字符数”

①首先把一个模板套进去

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body></body>
</html>

②根据要求写,段落就是p标签，按钮和输入框也是套个模板进去，菜鸟教程搜索html表单，套入模板,然后再根据实际情况改

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body><p>...</p>省略n个段落<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"><input type="submit" value="Submit"><input type="submit" value="Submit"></form>
</body>
</html>

③得出大概就是这样，你会发现跟最后的html文件还是有差距的，因为一开始形成的html文件，还没有和css，js文件进行交互，所以id那些都没写。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>kc_homework_9</title>
</head><body><p> JavaScript脚本语言具有以下特点:</p>省略n个段落<form><input type="text" placeholder="要添加在内容粘贴在这里"><br><input type="text" placeholder="请在这里写明添加在第几段后"><input type="submit" value="添加"><br><input type="submit" value="统计字符数"></form>
</body></html>

css文件

要求：a各段首行缩进2字符，b结果蓝色加粗字体显示，在该按钮右侧120像素处

①对p标签的内容进行渲染
```
p {font-size: 20px;text-indent: 40px;/* 首行缩进2字符，根据字符大小变化 */
}
```
②对结果渲染，首先要有结果。
根据上次（第九次）作业的逻辑，可以先在html里插入一空白的文字，然后后续用js进行修改
```

<span id="count"></span>
```
```
/* css文件要增加的内容 */
span {color: blue;
font-weight: bold;/* 因为在按钮右侧，所以采用相对定位 */
position: relative;
left: 120px;
}
```
- js文件
  
  要求：两个按钮点击事件，a一个点击后添加元素，b一个统计字数
  
  ①也跟上次作业一样的逻辑，点击触发一个函数，函数执行操作，所以需要两个触发函数
```
// 当添加按钮点击,进入
添加按钮.onclick = function () {}// 当统计字数按钮被点击
统计按钮.onclick = function () {}
```
  因为需要找到按钮，所以需要给按钮加上id，然后再添加处理函数
```

<input type="submit" value="添加" id="btn_add">
<input type="submit" value="统计字符数" id="btn_sum">
```
```
//根据id，获取到html中的按钮
var Btn_add = document.getElementById('btn_add');
var Btn_sum = document.getElementById('btn_sum');// 当添加按钮点击,进入
Btn_add.onclick = function () {add_content();
}// 当统计字数按钮被点击
Btn_sum.onclick = function () {count_num();
}function add_content()
{alert('添加按钮被点击');
}function count_num()
{alert('统计按钮被点击');
}
```
  A.为什么要这么麻烦，添加多一个函数，为什么不直接在html里写 οnclick=函数名？
  
  |
  
  我的逻辑是，低耦合，说人话就是，尽量不要让两种语言混杂在一起，这样如果后续需要修改也不会出现 “动一发而牵全身” 的事情，这也是为什么虽然css内容很少，我也要分出来一个文件的原因所在。（这个是编程习惯，没有好坏之分）
  
  |
  
  B.为什么一般写好一个触发事件或者一个函数最好先测试一下？
  
  |
  
  因为有可能一些细节问题没有处理好，现在虽然没有影响，但到后面等你发现有问题的时候，往往很难发现是前面埋下的伏笔，找bug的时间会耗时很长，而问题只是你没有注意到的一些小细节。（别问，问就经历过n次啦，贼浪费时间！！！）
  
  |
  
  继续
  
  ②接下来就是填补函数的内容了，这一步是比较耗时的
  
  再来看看要求，分解一下目标：
```
第一个输入框输入内容
第二个输入框输入第几行
点击添加按钮，就将内容添加到html相对应位置
点击统计按钮，统计字数
```
  A-为了拿到html里输入框的内容，可以使用：
```
document.getElementById('对应的id').value
```
  不懂的可以百度 “js 获取 html input”这些关键词，很容易可以找到如何拿到输入框的内容
  
  所以html里两个输入框要加上id值：
```

<input type="text" id="paste" placeholder="要添加在内容粘贴在这里">
<input type="text" id="paragraph" placeholder="请在这里写明添加在第几段后">
```
  （这里↑的placeholder也是百度出来的，关键词 “html input 默认显示内容”）
```
//js文件
var paste_content = document.getElementById('paste').value;
var paragraph = document.getElementById('paragraph').value;
```
  B-添加内容到html，这里涉及到DOM，先科普一下
```
DOM是简称
全称是Document Object Model
直接翻译就是：文档对象模型
```
  DOM 将 HTML 文档表达为树结构
  
  要添加元素到html里，就相当于往树里加个一个枝干
  
  所以我们先要创建一个元素，然后添加进html树里。
```
//第一步，新建一个p（段落）元素
var para = document.createElement("p");
//第二步，新建一个文本
var node = document.createTextNode(paste_content);//paste_content就是获取到输入框1的内容
//第三步，将文步添加到p元素上
para.appendChild(node);//第四步，找到要添加的位置（待会讲）
var element = document.getElementById("content");
//第五步，将刚刚的节点添加进html树里
element.insertBefore(para, p[paragraph]);//paragraph是输入框2的内容
```
  前面新建节点，和在节点后加入文本应该没问题，有问题的可以看看html树结构
  
  |
  
  主要问题应该是：如何找到要添加的位置？
  
  先看html文件：
```
<div id="content"><p> JavaScript脚本语言具有以下特点:</p><p> JavaScript脚本语言具有以下特点:</p><p> JavaScript脚本语言具有以下特点:</p><p> JavaScript脚本语言具有以下特点:</p>省略一堆p标签
</div>
```
  js要查找html元素有三种方法：
  
  a.通过 id
  
  b.通过标签名
  
  c.通过类名
  
  |
  
  我的想法是，把p标签用一个div框起来，然后先找到div，再找里面的p元素
  
  于是js里就多了一行：
```
var p = document.getElementById("content").getElementsByTagName("p");
```
  所以上面第五步里的p[paragraph]的意思就是找到第几段，但是这个数组是从0开始的，所以如果你想插入到第2段后面，p[2]其实指的是第3段，所以第五步的insertBefore方法是插入在节点之前。（第2段之后与第3段之前是同一个位置）
  
  【建议多看几遍，梳理一下，其实并不是很难理解的】
  
  C-统计字数并显示
  
  显示很简单，就替换的掉html里原本空白的部分嘛
```
document.getElementById("count").innerHTML ="总共有" + 变量 + "字符";
```
  （html里span的id值是count）
  
  |
  
  要怎么计算呢？
  
  我的想法是：首先获取每段的字数，然后再逐段相加。
  
  a.获取每段的文字数量：
```
p[i].innerHTML.length
```
  b.有多少段：
```
p.length
```
  c.迭代相加就行啦
```
var temp = 0;var p_sum = 0;var p_len = p.length;for (var i=0; i<p_len; i++){ temp = p[i].innerHTML.length;//迭代获取每段的字数p_sum += temp;}
```
  （需要什么变量，就补上什么变量就好啦）
  
  完整函数代码：
```
function count_num()
{var temp = 0;var p_sum = 0;var p_len = p.length;for (var i=0; i<p_len; i++){ temp = p[i].innerHTML.length;//迭代获取每段的字数p_sum += temp;}document.getElementById("count").innerHTML ="总共有" + p_sum + "字符";}
```

三，总结一下

做题逻辑

1拿到题目，我会先分析要求，然后就可以明确每种语言需要干的活有哪些？

2①对于html来说，首先肯定是先套个模板，然后再根据要求加入需要的内容

②对于css来说，css和html交互的方式主要是通过class，id，或者标签名等方式，所以要根据需要给html文件添加相关的内容。

③对于js来说，与html交互的方式也主要是id，class，或者标签名等方式，所以根据需要给html文件添加相关的内容就行
分解思维

如果你读完了我的文章，你会发现，我会不停地分解问题，一个复杂的问题简单化，一个抽象的问题具体化，然后再从简单的做法推演出复杂问题的解决方案。

（这只是一种解题思路，可以参考）
框架思维

为什么对于一个问题，我能很快定位到相关的知识点？

是因为我把html，css，js都吃透了吗？并不是，只是我了解整个框架。

只要你了解了js是通过id，class等和html进行交互的，你需要操作html一个元素的时候，你理所当然就能想到，先给该元素加个id值，然后js文件里获取，这样就可以脱离html文件继续处理啦。

每一门编程语言的都有其框架知识，只要你了解一门语言的框架知识，你就可以很容易上手这门语言，因为遇到问题，你知道如何去找相关的知识点
写在最后

虽然是以第十次作业为基础，分享我的做题思路，但其实很多思路都是可以想通的。我已经尽力去说清楚了，但肯定还是会有说的不清楚的地方。我并不期待看完这篇文章的朋友能有多少收获，但如何能有一点点收获，我觉得我的分享也是值得的。

写此类文章是非常耗费时间的，但会比纯分享作业代码好很多（个人认为），以后是否会继续分享此类文章，一个看阅读数据，另一个看是否有时间。

非常感谢你能看到这里，希望没有浪费你的时间！

“授之以鱼” 不如 “授之以渔“（网页设计-第十次作业-思路分享）相关推荐

授之以鱼不如授之以渔！五分钟教会您手工查杀***！
授之以鱼不如授之以渔!五分钟教会您手工查杀***! 经常看到有人求助- 为什么我的主页被改了,死活改不回来呀? 这个进程是不是正常进程呀? 这个程序是什么程序呀?为什么死活杀不掉呢? ....... ...
Python爬虫小白全攻略-授之以鱼不如授之以渔
最近研究项目需要用到一些资料,无奈网上资源要么添加无数广告花里胡哨,要么就是1页内容给你分了N页得来回点数次.研究的东西挺明确的,看文档给我整蒙了,为了让自己看着舒服及归纳总结,决定做个爬虫,由于Py ...
现代化的中国教育，缺失的不是钱，是思想（之一）--“授之以鱼不如授之以渔”的局限性
之一:理论部分:"授之以鱼不如授之以渔"的局限性 1.理论错误: 在经典的教育思想中,师者:"传道授业解惑".教育的法则亦云:"授之以鱼不如授之以渔. ...
码垛机器人逐渐代替人工，“授之以鱼不如授之以渔”
前言码垛机器人逐渐代替人工,搬运工即将面临着失业???授之以鱼不如授之以渔,掌握一门技能,才能更好的适应时代的变化... 近年来,随着科学技术的发展,我国智能制造迅速发展,对自动化生产的需求逐渐增加 ...
授之以鱼不如授之以渔
提起笔,一下冒出了关于书的名言: 书是人类进步的阶梯---高尔基还记得有意思的关于读书的辩论主题: 正方:行万里路胜过读万卷书反方:行万里路不如读万卷书关于读书还有很多,诸如读死书.死读书读书无 ...
贾扬清：从授之以鱼到授之以data，人工智能如何重塑传统软件行业
https://www.toutiao.com/a6692287092103315979/ 本文经O'Reilly授权发布大数据文摘字幕组作品作者:effy AI正在重塑人类社会的方方面面,例如研 ...
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适 ...
php网站开发期末大作业,网页设计期末大作业报告..doc
网页设计期末大作业报告. 南开大学滨海学院本科生论文(设计) 中文题目:外文题目:Website design and implementation based on Web develo ...
html网页设计期末大作业——化妆品html+div商城(19页)
html网页设计期末大作业--化妆品html+div商城(19页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星 ...

“授之以鱼” 不如 “授之以渔“（网页设计-第十次作业-思路分享）

一，为什么要写一篇思路分享的文章？

预料之外–阅读量上升

授之以渔–尝试新的分享方式

思路分析–知其所以然

二，开始分享（以网页设计-第十次作业为例子）

1 看题目

2根据要求找解决方案

html文件

css文件

js文件

三，总结一下

做题逻辑

“授之以鱼” 不如 “授之以渔“（网页设计-第十次作业-思路分享）相关推荐

最新文章

热门文章