她就像一张白纸,起始的笔画皆由我画成,我的画画了几年,而她的画只画了三个月。
我提出专项训练技能来应对目前的状况。
前端之旅
学前端
为什么我建议她学习前端呢?
我认为一个原因是C语言不是很直观相对于前端来说。
当时我想:前端好坏能做个美美哒的页面嘛。然而试图回避的东西始终会出现-JS也是语言,它还是一门我不是十分熟练的语言,这样我俩都成了学习者。
我成了学习者就很难即予足够的超前的指导。这是后来发现的。
起初我找到了这门课程: Web全栈工程师 。付费,在线。
我们尝试为此做了预习工作,现在看来确实需要预习,预习可以预热。在她学习过程中,我充当一个助教的身份,然而这个身份亚力山大,每一个坑,一起爬。这也迫使我伴随成长。
- Web全栈工程师
- 廖雪峰-JavaScript
先跳跃式学习,HTML结合紧密的DOM操作部分和HTML一同学习。
当进入JavaScript章节的时候,她非常艰难。把JavaScript知识点打印了一屋子的事情我没有干过,她干了。意志可嘉,但显然没有区分哪些是字典型知识。
还有工程化思维欠缺。
当然,我总是尝试用宏观的感悟来带领她感受编程世界,我认为这很必要。
这种闭门修炼什么时候是终结?
面向求职。
第一天我给她看的是前端各层次需求的薪资情况,以及对应要求,那现在就应该重视这种要求。
摘录她的学习笔记:
17.3.6
前端学习生涯
自学糊里糊涂2个月,学HTML,CSS,JS,C++.
- C++ -只是皮毛知识
- HTML大概知识
- CSS —专业知识不牢固,理解不到位
- JS ——乱七八糟总结:
1. 计划不到位
2. 学习很懒散
3. 实践代码少
4. 没有项目
我开始每天盯计划:
1. 就是这么吊对不对就是这么吊。
学到这里我发现对于问题的分解能力需要锻炼。
我出了一个计算器题目,计算器可以一步一步做得很复杂。
但是设计情况不容乐观。界面很纠结,而字符串处理是分歧很大的地方,当时我知道这样很不OK,但还想不到根源所在。
先在明白了:她将界面和运算过于绑定。
在经过新的一段学习后,我们来到了廖雪峰-JSON一章,我对她学习的深度感到非常焦虑。她说自己已经了解了JSON的内容,只是课后题没做。
是吗?
No.这一章是非常独立的概念。清晰且简单。
目前的情况是知识下面隐藏着危机。这段时间她是自学状态,我俩周末各种忙其他的,而白日的疲劳,晚上我只想休息。
我出了新的题目:做一个天气预报的网页。利用JSON。迟迟没有动静。催促还是没有。问:完成步骤。答案依然是:不知道。
根据情况我提出:
- 计算思维方面欠缺-需要补。- 计算机思维导论
之前补充数据结构,但是计算机基础想绕过发现绕过有隐患。绕不过的。
专项训练
- 锻炼分解问题的能力
步骤分解。
案例:
案例一-思考开机过程:
在主机上寻找开机按钮,
- 主机形状
- 按钮位置
点击按钮
if 没反映
电源问题
else
插线问题(注意用电安全)
3 等待开机
案例二-天气预报-细节-变与不变
&&默认地点&&为 北京 或者 当地城市
把&&默认地点&&传送给外部服务器。
接收 天气预报 的数据。
把得到 数据 中 你想要的 内容拿出来进行转换。
展示你的数据。UI
什么是主次?能重用下来的步骤有哪些?
分清主次。
逻辑关系 能够 重复使用。
由此得到
1:独立方便重用。
2:模块化方便重用。
.
1. 关联要明确。-函数的参数来表示。
function DJY(num/*This is Number*/,year/*年龄 */,work/*工作种类*/){}
如果将不同功能用不同函数表示可以将功能之间的关系严格限制在所用参数上。
类(class)也是这样。
案例三-制作扫雷游戏
区分逻辑部分和界面部分。
界面是否漂亮的复杂度与逻辑无关。
一个项目逻辑上完成才是完成。界面容易变动。两者需要分离看待。
作品:丑陋版 4格扫雷。
扫雷:
- 组成
雷场-格子
version: 0.1
- 逻辑关系
1. 先随机初始化雷场
2. 点击格子后判断格子是否有雷
案例四-DIY浏览器
浏览器功能 | 作用 |
---|---|
HTML | 显示 |
CSS | 美化-样式 |
JavaScript | 动态 |
制作一个自己的浏览器:
- 把HTML源码解析成(翻译成)DOM树
- 组成:
自闭合和闭合两种
- 组成:
<HTML></HTML>
<br/>
<????/>
<????>mmmmm<jjjj></jjjj><xxxx></xxxx></????>
<abcd>iuoo</abcd>
我们自己的浏览器支持标签:
- html
- head
- title:设置标题
- body
- a :点击后跳转
- p :文字用段落显示
- ul:li :有序列表
- table :表格
8个标签
- 标签关系
- 重复的事情-独立出来
????-
|jjjj
|xxxx
<????>
<????>
<????/>
</????>
</????>
获取X 等待X结束
if (标签)
{
识别。填充树。
}
栈-用来判断本节点范围:
生成语法树:本节点
基础结构:
> 压栈string1
</string1> 弹栈比较,检查错误,结束节点范围。
树:
“`
tree
father: child1
child2
child3
指针
```
- 2按照需要画成界面
浏览器需要操作DOM树:涉及到树的操作,树这种数据结构她现在还不熟悉。
下一步:
- 计算机思维导论
- 数据结构
- Web前端相关