小朋友的编程-五

这一篇仍然是视频部分的补充资料，主要就是介绍javaScript的

关于js代码

通过前边的知识，我们知道写在网页中script标签中的内容，就是javaScript代码，我们以前还提到过， javascript 是一种接近人类自然语言的高级编程语言。所以在网页中一个必然的事实就是，凡是看到<script>标签之间包含的东西，那么它就是js代码，而js代码在现代的网页中是无处不在的，我们随意的找一些现实中的例子，比如baidu，如果我们使用开发者工具打开–还记得怎样操作吗？（想一想快捷键–F12），你就会发现大量的script标签，就像这样：

但是我们为什么需要js代码呢？

因为本身html是死的，它是什么样就在你写完它的那一刻就固定了，比如一个标题元素<title>标题一</title>一开始就固定了永远是标题一，一个数字为100,那么它就会是一直是100，像这样一经创建再也不改变的现象，通常用静态这个词来概括。但现实中的网页却不是这样，大多数时候网页是可以进行各种各样的交互的。比如在我们上次视频中的那个按钮–也就是<button>，我们点击了它会触发一定的事件，我们视频中就是让它计算最终结果并显示结果，再比如你去优酷看视屏的时候，你要去点击播放按钮才会开始播放，以及在玩游戏时你常常会通过键盘让角色运动，而让它干点儿什么通常就是靠js来帮助实现的。

换一个更通俗的例子，还记得我们前边的机器人吗，我们通过html这样的元素组成了机器人的头，身体等各个部位，而js就相当于给机器人添加了各种行动和思想，让机器人可以动动胳膊抬抬腿之类的行动，这就是为什么我的网页中需要js。因为它会让原本死的元素由静态变为动态，从而变得可以被人们点击，滚动，缩放（缩放网页，你可以试试按下键盘中的Cril键，同时滚动鼠标中间的滚轮）等等交互行为。

好了，现在停下来我们总结一下：
我们会知道，通常的网页都是可以交互的，有的有可以点击的按钮，有的有可以放大的图片，大部分网页还能随着鼠标的滑动而滚动…等等这些行为，都是依靠js来实现的。

那么我们就来看看JS的具体内容，他到底有什么魔力呢？我们重新回顾一下上次视屏中的js代码：

// 表示注释，就是用来说明你在干什么的，使用时系统会忽略掉代//的行，所以这其实是给人看的，计算机是不管的

<script>
  // 说明: element
  // 上边的右侧代码是元素，它是网页的基本组成部分，这些都是 W3C 规定好了的，所以不是重点，重点是下边的代码
  // 这里用到的数学公式： 速度v * 时间t = 路程s
  
  // ------------------
  // 编程就是把复杂的事情，一步一步分解
  // 目标： 创建一个网页，可以输入v和t，点击按钮，计算路程s，并显示结果
  //    1> 创建一个网页，可以有输入v和t的元素 --- 已完成，并且不需要你掌握，知道了就行
  //    2> 要能拿到v和t元素:  分别找到t/v input元素  
  //    3> a 点击按钮（事件）
  //       b 拿到现在的v/t的值
  //       c 计算
  //       d 拿到resultElm 
  //       e 修改innerText
  
  
  // 步骤2> 分别找到t/v input元素, 通过id去找到的 -- 规定好了的方法
  var speedElm = document.getElementById("speed")
  var timeElm = document.getElementById("time")
  var distanceElm = document.getElementById("distance")

  // 步骤3> 
  //    a 指定点击事件 -- 也是规定好了的， 通过onClick="anXiale()"
  function anXiale() {
  //    b 拿到现在的v/t的值
    var speedValue = speedElm.value
    var timeValue = timeElm.value
    var distanceValue = distanceElm.value

  //    c 带入公式 s = v * t ????
    var distance = speedValue * timeValue      

  //    d 拿到resultElm 
    var resultElm = document.getElementById("result")      
  
  //    e 将结果显示到 resultElm元素 -- 规定好了的
    resultElm.innerText =": " + distance
  }
  
</script>

首先，你肯定总是见到var这个单词，var是一种简写，他的全称是variable【变量】,再直白一点儿就是可以改变的量，比如在计算一个正方形的面积时，我们带入公式 S(面积) = a(边长) * a(边长),不同的a就会有不同的S， a和S都是可以改变的，因此它们都是变量，而有的量比如 圆的面积计算中 S = 2 * π * (r * r)，其中的r跟S都是可以改变的是变量，而 2 和 π 都是固定的，所以我们称呼它们是常量而不是变量，对，就是这么的直白。

恭喜你，因为变量几乎就是网页可以变化的全部秘密，正是由于js中变量的存在，所以网页才可以动起来，所以变量的作用就像是提线木偶的线，一旦拉扯那些控制线，木偶就会做动作。

其次，上边代码中还有一些符号，有计算符号 + * 还有 = ，他们的意思就是他们本身的意思，只需要注意的是 =, 在编程中并不叫等号，而是赋值符号，它表示将右侧的数值或者变量 赋值给 右侧的变量，好吧看起来的确有一些相等的意思，暂时这样理解也是没问题的。

还有，这样的语句 function anXiale() {}, 这个我们称之为函数，它是最小的功能单元，我们来具体看看：

// 函数定义: 括号里数，我们叫他参数，没有参数就不写
function 函数名（参数名1, 参数2...） {
    // 函数具体怎么作实在这里，我们称之为 函数实现
    return 返回数值  // 有的函数有，有的没有
}

// 函数调用，就是
函数名（参数名1, 参数2...)

比如,我们刚刚提到的计算正方形的面积，如果写成函数的话并使用一下就是：

// 函数定义
function squareArea(a) {
    return a * a
}

// 首先声明面积变量S
var S
// 然后调用函数，参数
S = squareArea(5)  
// 输出结果
console.log("面积是" + S)

运行一下结果就是，点击这里去看代码：

所以呢，函数就是一种操作，它会有输入然后执行某种操作，在比如我们使用console.log("面积是" + S)来输出结果到控制台，其实这也是一个函数，你看不到它的实现是因为 浏览器已经默默的帮你实现了，你直接使用就可以了，还有比如document.getElementById("speed")这样的函数调用，其实我说这都是规定好的，就是因为它们跟console()一样，都由浏览器帮我们实现好了，所以浏览器跟系统，其实又点儿想你的爸爸妈妈，他们已经帮你准备好了所有的物质基础，你只需要负责好好学习跟快乐成长就可以了 :)

好了，读到这里我希望在回过去看看我们上次的视频中的代码，是不是了解更多一些了呢，是不是觉得我说的那句你们基本已经学会了编程了，其实真的不是在骗你们…

所以，总结一下，网页 = html元素 + js，html是网页这个机器人的组成零件，js是可以让机器人动起来的电能和大脑。

另外，这里我举了一个计算面积的例子，你能不能参照着，想想如何去完成一个计算器呢？
我想最起码我们要有4个函数对应 加减乘除 4个基本操作对吧？还要有数据输入的html元素？对，还有呢…？

好了，下期视屏中我们一起试试吧