myCourse

1-2 JavaScript 基础语法

首页

各位小伙伴,大家好,欢迎大家收看 web二 系列课程。今天我们学习 JavaScript 基本语法。

JS 语法概述

我们通过上节课的学习知道,JavaScript这种语言的特点:JavaScript 是动态类型,而且是弱类型语言。那么我们这节课就通过学习JavaScript的基本语法来证实一下这些特点。

内容提纲

我们来看一下目录,第二章一共有五小节内容。分别是:JavaScript基础语法;JavaScript变量及原始数据类型;JavaScript流程控制结构;JavaScript的基本代码规范;以及调试工具的使用。

我们先来看第一节内容:JavaScript基础语法。

JS 语句

JS语句,对于浏览器而言,语言就是命令,它会告诉浏览器要做什么。比如下面这条语句,是在浏览器中打印出hello的字样:document.write("<p>hello!</p>")。通常每条语句都要以分号结束,当然,JavaScript是一门很宽容的语言,你如果不加分号,它解析的时候会自动加上,但是它给你加就不一定能够加对地方了,就会出错,而我们编程过程中有一个原则就是尽量避免bug的出现,减少bug出现的可能性。所以我们建议,或者说是要求大家都要加分号,养成规范的编程习惯。我们的JS程序就是由一系列的JS语句构成的。

像我们下面这段代码,<script>标签中就是一段JS程序,是有4个语句构成,都是弹出窗口。而且每个语句都是以分号结束。是demo1-2-1,我们一起来看一下。

JS 语句块

下面要说的是语句块,由多个语句放在一个大括号中,就形成了语句块。这里,JS程序的执行顺序和书写顺序是一致的。紧接着这儿也有一个例子,可以来看一下。

JS 注释

下面是JS中的注释:可以给JS代码添加注释,来提高代码的可读性,JavaScript不会执行代码。如果我们的注释只有一行,那就写在//双斜杠后面就可以了,如果我们的注释比较多,或者分行写更易于阅读,那就用/*注释内容*/,这种方式就可以了。这里也补充了HTML和CSS中的注释,大家还记得吗?是这样的。

内容提纲

下面看第二小节的内容:JavaScript变量和原始数据类型。

字面值

像我们平时见到的这些量,叫做字面量,都是一些确定的值,是1就是1,是hello就是hello。变量则是存储信息的容器,是可变的。就像代数中用一个字母来保存值一样,JavaScript中的变量就是来保存字面量。

变量的创建和说明

那下面我们来看一下JavaScript变量的创建和说明。…..

JS 内置数据类型——罗列一下

看完变量再来看一下数据类型。我们在第一节课就已经说过了,JavaScript是弱类型语言,一个变量没有固定的数据类型,可以相互转换,那一共有什么数据类型呢?有怎么转换呢?咱们来看一下。这里一共有5中原始数据类型,number,string,boolean,undefined,null五种。要想知道某个变量某个时刻的数据类型,我们可以用typeof运算符。

JS 内置数据类型——分说

下面具体来看一下,number类型,就像后面的这些值,数值类型,既可以是整型也可以是浮点型。都可以,没有明确的区分。……

下面是一个例子,我们定义了几个变量,分别给他们赋了不同类型的值,然后用typeof来查看各个变量的数据类型。

JS内置数据类型——与 C 语言的区别:

我们可以看到,JavaScript和C语言有如下的区别:

运算符

一般有了变量,就该有运算了,下面我们来看一下运算符。有这么多,算数运算符:+、-、* 、/、%、++、--,字符链接:+,赋值运算符:=、+=、-=、*=、/=、%=,比较运算符:==、===、!=、>、<、<=、>= ,逻辑运算符:与(&&)、或(||)、非(!),条件运算符:变量名 = (条件) ? 值1 : 值2

接下来我们通过一些例子来看一下这些运算符的有趣之处。

使用 + 连接字符串

是一段示例代码,咱们先看一下:
<script type="text/javascript">

var x=3;
var y="3";
var z=5;
z += y;
var a=y+z;
document.write(x+y+'<br/>');
document.write(z+'<br/>');
document.write(a+'<br/>');
document.write(x+y+z+'<br/>');	 `</script>`

这是一个使用+连接字符串的例子,我们一起来看一下这段代码。

比较运算符

接下来我们来通过示例代码看一下比较运算符的使用规则。

<script type="text/javascript">

var x = 3;
var y = 3;
var z = “3”;
alert(x == y); //改为:x === z `</script>`
条件运算符

下面来看条件运算符。

<script type="text/javascript">

var a = 39;
var b = 30;
document.write(a>=b? "a大于等于b":"a小于b"); `</script>`

也就是咱们的demo1-2-6.html,我们一起来运行一下,看一下结果。

运算符

最后咱们来看做几道题,看大家有没有真正的掌握运算符的运算规则。

数据类型转换

我们前面提到,JavaScript 是弱类型语言,意思是说它的数据类型不是固定的,是可以相互转换的,是后来可变的。那要如何改变呢?我们一起来看一下:

JS 的数据类型转换分为两种情况,一种是隐式类型转换,也就是变量在进行运算时,可能会发生数据类型的转变。这里有两种情况,一个是转换成 String 类型,当我们用+链接时。比如这里:
var sum = 'img'+3+'.jpg';
这条语句的结果会是什么呢?我们看到这条语句是两个字符串加上一个数字,这要怎么相加呢?数据类型不同啊。所以这里就发生了数据类型的转换,这里的+不再是数学运算中的加号,不是加法运算的意思,而是字符串连接的意思,也就是说,这里这个 3 就会发生隐式的数据类型转换,由数值类型,转换成了字符串类型。这条语句的运行结果就是一个字符串:‘img3.jpg’。
另外一种情况是转换成布尔类型,是在变量前面加 !!(两个感叹号就可以了)

还有一种情况就是对变量进行显示类型转换,也就是我们有明确的转换方法来转换变量的数据类型。这里我们也列出了三种情况,分别是转换成数值类型,转换成字符串类型,和转换成布尔类型。这里用到的都是一些函数,是 JS 的内置函数。用这些函数就可以把变量转换成相应的数据类型。

翻页是个例子

下面我们来看一个例子。(对上面学到的应用)

运算符左右数据类型转换规则

下面我们来看一些转换规则,这里还有一些隐式转换的情况,在运算的过程中变量的数据类型会发生怎样的变化。1.当+左右出现字符串时,作为字符串链接运算符来使用。2. -、*、/、% 这些运算符左右出现字符串或者是布尔值时,都转换成数值型,因为只有数值型才会有加减乘除的运算嘛。还有当比较运算符左右出现数值和字符串时,也就是说当字符串和数值比较大小时。会将字符串转换成数值类型,如果出现布尔类型时,会将布尔类型转换成数值类型。所以你就记住,只有数值类型才能进行四则运算和取余,比较等运算,其它的类型若是遇到了,就先转换成数值类型,再进行运算。如果是逻辑运算符,则会将数据类型转换成布尔型后再进行逻辑判断。

数据类型转换规则

在类型转换的过程中经常会遇到其它数据类型和数值类型之间相互转换,那要转换成几呢?下面我们来看一下这个问题的答案。。。

好了,关于 JS 中变量和原始数据类型的内容就是这些。

内容提纲

接下来我们来看第三小节的内容:JavaScript 流程控制结构。流程结构,大家想到了什么?嗯,分支和循环,是的,这一下节我们就来看一下 JS 中的分支和循环。

选择与分支语句

先来看选择与分支语句,一共有四种:if 语句,if...else 语句,if...else if...else 语句,还有就是 switch 语句。(这儿在PPT上面没有展开详细的讲解,我是不是应该加上呢?这里的用意应该是觉得和其他语言是及其类似的,所以就没有说吧。)

翻页(分支的例子)

下面看我们经常遇到的一个例子,给出一个分数,然后判断这个分数是哪个等级的,这里我们用到的是 if...else if ...else 这样的一个语句来进行判断和分支的。如果是100及以上就是甲,一次10分一个等级,一直到 小于60分的,就是不及格。一共分为了5个等级,我们来运行一下这段代码,看一下效果。

循环语句

接下来我们看一下 JS 中的循环语句都有哪些,啊,有三种,for 循环,while 循环和 do...while 循环。这些呢也和我们之前学习的规则是一样的,我们就不展开讲了,下面通过一个例子来掌握一下循环语句的使用。

翻页(是循环语句的例子)

这个例子是让大家动手做的,分别用 for 循环和 while 循环语句向文档中动态写入一个四行四列的表格,表格的每个单元格中有一个空格。(这儿要留出时间让学生们自己写一下吗?还是直接看例子的代码?)

循环语句(终止循环)

下面我们看一下如何终止循环,有的时候我们写的程序有错误的话就会造成程序陷入了无限的循环中,跳不出来了,没有办法停止了。这就是没有设置停止循环的条件的原因。

这里有两个关键词,一个是break,一个是 continuebreak的意思是终止循环,不转了,而continue的意思是跳过本次循环,也就是这次循环不转了,下面继续,就像是说我们本来有五小节内容要讲,说讲到这儿了吧已经,现在这一下节跳过去,不讲了,继续讲后面的内容,是一样的。而如果是break呢,就是到这儿了,老师有事,剩下的都不讲了。就是这样的区别昂。这儿有一个例子我们可以一起来来感受一个这两个词的区别。看demo1-2-10.html(用两个词得到的结果是不同的)

内容提纲

好了,流程控制咱们就讲到这里,我们已经学习了前三小节的内容,节下来看第四小节:JavaScript 的基本代码规范。我们知道不管是自然语言还是程序语言,都有一定的规范,俗称就是习惯。不是必要的,都是一些约定俗成的。如果不这样,会有很多麻烦。

代码规范的重要性

这也是代码规范的重要性。遵守相关的代码规范可以方便代码的交流和维护,就像你要想和一个英国人交流最好用英语。不影响编码的效率,不与大众习惯想冲突,就像我们中国见面习惯问吃饭了吗?而外国人不是这样的习惯,他认为问吃饭了吗?是在问他的隐私问题,他们见面一般都说 hello。可以使代码更美观,阅读方便。比如代码缩进的规范,如果我们没有代码换行和缩进,就这样连这写,大家想象一下会不会很好看?我们举个栗子,打开一个网页看一下(用 QQ浏览器 打开百度网页,然后查看页面源代码,那个就是没有格式化的代码,好乱的。然后用 火狐浏览器 再打开百度首页的源代码,对比一下,效果一下就出来了)。通过对比,我们也看出来了,还是遵守一定的代码规范才使代码逻辑更加清晰,更易于阅读。

JavaScript 基本规范

这里是我们在写 JS 的程序时,要遵守的几个基本规范,其实我们前面的课程中已经学到了,这里我们再一起来看下。

变量定义时,尽量使用 var 关键字定义,因为不使用的话就是定义的全局变量嘛。我们尽量减少全局变量的使用。为什么我们也讲过了,容易出现错误。而这些是完全可以通过减少全局变量的使用而避免的。还有一个就是变量的命名一般是有意义的,比如取值的时候可以用val,求和的时候可以用 sum 等等,这样也会增加咱们代码的易读性。

单行程序,要以分号结束,这个分号咱们也几经多次强调了,一定要加分号,虽然JavaScript是宽松的,它可以自动给你加上分号,但是毕竟是机器,它难免会会错你的意思,加错地方,使你的程序出现一些很奇怪的 bug。

缩进和注释这些就更不用说了,为了提高自己写代码的效率,为了大家理解我们代码好理解,一定要养成规律缩进和谢注释的习惯。

当然规范不只这写这么简单的几条,还有好多,这些是最基本的,希望同学们可以课下可以自己查找资料,了解更多 JS编程中的代码规范。

内容提纲

好了,下面就剩下最后一下节内容了。是调试工具的使用,这里我们简单介绍一下,我们实验一的内容就是将这块儿的。

调试工具的使用

我们经常用到的,也是推荐大家使用的有两个工具,一个是谷歌浏览器的快爱发着工具,一个是火狐浏览器的一个插件:firebug。当然,有的同学说,老师,我用火狐浏览器的开发者工具行不行?都行,火狐浏览器的开发者工具也是很好用的。开发者工具的使用其实都是大同小异的。

在使用这些工具调试我们的程序时,一般用到的是这几个操作。

在控制台输出用:console.log()

在程序执行是对其进行跟踪:可以监控错误,可以添加断点,可以单步执行,也可以连续执行等。

小结

最后我们来看一下本章小节,本章学习了JS的语句和语句块,学习了 JS 的变量和原始数据类型,学习了JavaScript 的基本代码规范和调试工具。

最后一页

谢谢大家