举例引导

焰色反应
化学 做了物理实验
学生 疑问 颜色产生原理是啥 只告诉了什么金属燃烧是什么颜色

推出话题 某些事物的学习方式是这样的

你不知道为什么会这样
但是你知道（发现）事实就是这样

例子认证话题，证明理论

燃烧试验
图一
1.不知道为什么蜡烛燃烧会产生水（的原理）
2.但我们发现蜡烛燃烧会产生水
3.猜想 蜡烛燃烧需要空气

试验笑话（抓住情绪 提高大脑活力） 燃烧试验思维弊端

生物学家，蟋蟀 拍桌子 蟋蟀跳走了
把蟋蟀腿给剪了，拍桌子，蟋蟀不跳了
得出结论 蟋蟀的耳朵长在腿上

但是一个实验可以推翻另一个实验

理论研究（理科）VS 工程实践（工科）
前端 偏向于工科

理论研究（超前意识）： 思考， 推倒， 定量
思考：思考一些相关联概念
推导： 根据一些基础公式和已有理论 推导一些猜想
定量：两个氢分子 和 一个氧 生成两个水

工科实践（利用理论利用在生活中产生价值）： 利用理论，做实验，产生价值
利用理论：该怎么利用理论产生价值的思考
实验： 投入生产实践之前还需要不断的实验
产生价值： 投入生产

计算机

• 不需要知道自行车踩踏板会向前行但是你就把自行车学会了
• 不需要知道蜡烛燃烧产生水的原理，但是你可以在生活中利用这个实验创造价值
• 你不知道css 的一些属性改变页面样式的原理，但是你可以使用这些属性改变页面的样式

结论：工程思维学 很多东西，不知道为什么，我就把某事学会了

工程思维学 css

那些是理论

1. w3c spec 一丝 张鑫旭
   html 4.01 文档
   css 2.1 文档
2. 浏览器渲染过程 火狐， chrome开发者
   如何学： 记忆 思考 推导
   哪些是实践
   1.color： red得到红色
   2.各浏览器的兼容性 太工程化了

实践差不多了 可以反推理论

如何学： 观察 设计实验 得出结论

如何做css实验

1. 遇到问题，分解问题
   比较复杂的问题 拆解
2. 提出猜想
   没猜想直接观察
3. 设计实验（准备材料（jsbin），排除干扰项（很重要删掉与问题无关的代码））
   4.得到结论
   5.分析结论
4. 验证结果
   1. 成功 - 得到结论
   2. 失败 - 回到第二部

以上是一个抽象步骤 老师以 清楚浮动为例

1. 遇到问题 清除浮动
2. 提出猜想,google 查找理论 最后一个元素 clear：both 或者 父级元素overflow： hidden可清除
3. 设计实验： 材料jsbin 排除干扰项 使用最简洁代码
4. 得到结论 使用上面方法是可行的（不一定是对的）
   5.分析结论
   6.验证结果

理科思维学 css

（css很少使用概念的，大部分都是规定的语法 选择器：优先级，属性：继承，盒模型）但是js需要理科思维多一些

以BFC为例

1. 你无法想象你没有见过的东西

• 类比法-声波 V.S 水波 bfc 红色的框体
• 抽象法 - 地球 V.S 小球

2. 学习的路径
   每个人喜爱学习的路径不同

• 视觉 （图片）（适合中国应试教育 老师板书，书上内容）
• 触觉 （摸 美术）
• 听觉 （适合应试 老师演讲）
• 文字
• 混合

学习路径

1. 概念
   1. 逐字的思考
      对象：无序数据的组合
      数组： 有序数组的组合
   2. 全面思考
      2.应用
2. 正确 - 加强概念的理解
   2.错误 - 纠正理解（这个很重要 这样会把一个概念理解跟透彻）
   如果一个概念你认为非常复杂，那可能是你理解错啦 到这时候请去问人 再思考思考

版权归于jirengu 方方老师
待更新...