JavaScript入门：从环境搭建到函数与变量基础

JavaScript入门与背景

从今天起，我们将带领新读者从了解JavaScript开始，逐步进阶至高级应用阶段。不赘述其他内容，现在即刻从入门阶段开始学习。

首先简要介绍JavaScript的背景，以免大家对其产生误解。关于其产生历史，无需过多赘述，毕竟历史细节并非学习重点。

需明确的是，JavaScript（简称JS）与常用于后台开发的Java语言并无亲属关系，两者的应用范围差异巨大。JS主要用于HTML页面中，对document节点进行增删改查，是一种构建与服务端通信的解释型语言。这仅是最基础的理解，后续我们将对JavaScript进行更深入的学习。尽管前文表示不再废话，但为了让大家理解，此处仍需稍作解释，希望想成为高级开发者的朋友们能包容这份啰嗦。

另外声明，阅读此文章的读者默认应具备HTML基础。如果连后续代码都无法理解，请先掌握相关知识再行修炼。独门秘籍并非人人可修，若走火入魔后果自负。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title></title>
</head>
<body>
  <h1>javascript大神修炼记</h1>
  <div>………………</div>
  <script type="text/javascript">
    function MyFun(){
      ……
    }
  </script>
</body>
</html>

Script标签位置与DOM操作

此类代码大家应已熟悉。需特别说明的是，文中的script标签写法与课本不同，它被放置在body标签内部，且位于body的最后位置。这是基于网页的加载顺序：页面从上至下按节点渲染，资源也是逐个加载。至于资源响应速度，则取决于服务器状态及当前访问情况，此为题外话。当页面从上向下渲染至script标签时，开始解析JavaScript代码。若代码中对document节点进行操作，只有此时才能正确获取节点对象，否则可能引发执行错误。因此，script标签未放置在head标签内。

函数与变量基础语法

接下来查看语法部分。我们将采用程序入门的方式进行讲解，直接操作document节点可能会让部分朋友难以接受。谈及程序，后续还需接触面向对象编程（OOP），因此我们先讲类、函数和变量。若你感到陌生，无需担心，我曾也是如此，但逐渐便能理解，相信你也一样。在JavaScript中，类和函数存在相互转化的概念，这导致许多理解上的困惑，因此我决定先从函数讲起，暂不让大家接触类的概念。

function WriteMyName(){
      console.log("My name is MrDream");
    }
    
WriteMyName();

此处使用Chrome浏览器，按下F12进入Console面板进行代码调试。建议大家习惯使用这款浏览器，随着后续调试演示的增加，大家也会喜欢上它，并自然习惯用它来调试代码。

前文使用function关键字声明了一个名为WriteMyName的函数，在方法体内仅写了一句简单的console.log("My name is MrDream")，随后直接通过函数名加括号的方式调用。

执行WriteMyName()，即可运行前述函数体内的内容。其内部逻辑为打印一句话，打印内容为My name is MrDream。目前大家只需明白console.log即代表打印操作即可。

简单小结一下函数体声明语法：function 函数名(){函数体}。

带参函数与变量应用

下面我们再来看一下带参数的函数。

function WriteMyName(_your_name){
      console.log(_your_name);
    }
    
WriteMyName("My name is MrDream");

当前声明的函数与前者的区别在于，打印内容通过参数形式传递。这样带来的好处是，之前调用WriteMyName()时仅打印固定内容，而现在我们可以这样写WriteMyName("马大哈")，在双引号内写入任意名字即可打印出来，是否更方便了呢？我们再来看具体示例。

灵活性较之前大幅提高，我们可以向函数体传递任意字符串名字。大家请注意，字符串必须带上外面的一对引号，否则会导致错误。目前的你可能尚不理解原因，接下来我们将继续讲解变量的声明，首先需理解变量是什么及其作用。

var five = 5;
var six = 6;
    
function add(){
  console.log(five+six);
}

我们同样使用函数名加括号进行函数调用add()，来看一下效果。

函数体内仍是一句打印语句，打印结果为11，即5+6=11，没错吧？若要进行其他数值的加法运算，该如何处理？是否要修改变量呢？对了，前文的var就是用来声明变量的关键字。我们声明了一个名为five和一个名为six的变量，并分别赋值，然后打印这两个变量相加的结果。

是否觉得每次想打印时都要修改函数体内的变量非常麻烦？那么我们来尝试一个传递参数的函数。

var five = 5;
var six = 6;
    
function add(num1,num2){
  console.log(num1+num2);
}
    
add(five,six);

我们在函数num1和num2的位置分别传入了变量five和six，同样打印出正确结果。这样，我们就可以方便地传入其他值了。

现在可以看到，我们既可以传入变量，也可以直接传入数字，正负均可。如果需要在函数体内使用不固定的值进行计算，我们就需要将该函数写成带参数的形式。

课程总结

总结一下，我们今天学会了什么？

第一，JavaScript是用来做什么的。

第二，JavaScript代码放在页面的什么位置最合适。

第三，变量的声明使用什么关键字。

第四，我们学会了函数的声明（包括带参数、不带参数以及带参数的原因），使用什么关键字。

哈哈，离大神境界又更近了一步，希望大家再接再厉，坚持下去，一定会有所收获。