本文引导初学者从零开始学习JavaScript。重点解析JavaScript与Java的区别,强调script标签置于body底部的必要性以避免DOM操作错误。通过Chrome控制台调试,详细讲解函数的定义与调用、带参函数的使用,以及var关键字声明变量的方法,帮助读者建立前端开发基础。
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代码放在页面的什么位置最合适。
第三,变量的声明使用什么关键字。
第四,我们学会了函数的声明(包括带参数、不带参数以及带参数的原因),使用什么关键字。
哈哈,离大神境界又更近了一步,希望大家再接再厉,坚持下去,一定会有所收获。