数据类型、变量和调试工具
1.引入
我们在上一节课中对JavaScript进行了一个简介,下面我们正式的进入JavaScript代码的学习。
2.JavaScript之HelloWolrd
我们在写第一个JavaScript程序的时候需要明确两个内容:①.我们应该在页面的哪一个位置写入我们的JavaScript代码(直接写在页面上是不行的,因为浏览器只能接下标签和样式)。②:如何把字符串"HelloWorld"写到当前的页面上去。
问题1解决方法:
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
问题2解决方法:
document.write("Helloworld");
代码示例以及效果显示
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<script type="text/javascript">
document.write("HelloWorld");
</script>
</body>
</html>
3.JavaScript数据类型
JavaScript中数据类型也分为两类:基本数据类型和引用数据类型。
(1).基本数据类型
字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(ES6新增,表示独一无二值)。
(2).引用数据类型
对象(Object)、数组(Array)、函数(Function)
注意:JavaScript中的对象和java中的对象是类似的,函数(function)和java中方法类似。
4.JavaScrip中的变量特点
JavaScript中的变量定义使用关键字:var来定义,具体是什么类型的数据是通过给定的值来决定的。同时javsScript中的变量还存在着一个比较特殊的情况就是拥有动态的数据类型。
下面演示JavaScript中动态的数据类型
//演示动态的数据类型
<body>
<script type="text/javascript">
var variable; //定义变量,未初始化,默认值为:undefined
variable = 12.5; //这一个时候的变量variable是数字类型(number)
variable = "testUser"; //这一个时候的变量variable是字符串类型(String)
</script>
</body>
我们定义了一个变量variable,但是发现它居然有三种数据类型,而且在不同的时期数据类型是不一致的,那么当我们需要使用这一个进行操作的时候,该怎么办呢?这一个我们可以使用JavaScript提供的typeof操作符进行变量类型的检测。代码如下:
<script type="text/javascript">
var variable;
document.write("---未初始化的数据类型:" + typeof(variable) + "<br>");
variable = 12.5;
document.write("---此时的数据类型是1:" + typeof(variable) + "<br>");
variable = "testUser";
document.write("---此时的数据类型是2:" + typeof(variable) + "<br>");
</script>
5.JavaScrip中的变量定义
(1).变量概述
变量即可以变化的量,和常量相对应。我们在理解这一个变量的时候可以把变量理解成是一个特殊的容器,什么样子特殊容器呢?,是用来存储固定一类特殊物体的容器,我们可以取更换容器里面存储的内容,但是不可以往里面放置不是这一类特殊物体的东西的容器。同时我们会给存放在里面的内容取一个名字,这一个就是变量的名称。
我们列举一个现实生活中的例子,比如我们定义了一个变量杯子,那么往这一个变量中存放的内容就只可以是液体,比如水、饮料等,而不可以存放其他东西,比如我们不可以把凳子放到杯子中,因为这样是不可以行的。
(2).变量定义
我们在定义变量之前需要清楚JavaScript中存在的变量类型有哪一些?这一个在上面我们已经列举出来了。分别有:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(ES6新增,表示独一无二值)。下面我们一起来看如何定义变量。
//变量声明的两种方式:
第一种:先声明,后赋值
var user;
user = "tom";
第二种:在声明变量的时候就进行赋值
var user = "tom";
下面我们来看一下按照不同的数据类型进行赋值以及输出的效果
<script type="text/javascript">
/**变量声明测试**/
//声明第一种数据类型:undefined,只声明,不初始化的情况默认赋值为:undefined。
var user;
document.write("该数据类型是:" + typeof(user) +",---" + user + "<br>");
//声明一个string类型的变量,这里在声明的时候可以使用单引号或双引号都行,但是建议使用双引号。
var userName = "Jerry";
document.write("该数据类型是:" + typeof(userName) +",---" + userName+ "<br>");
//声明一个小数或者是整数数字类型的数据。
var num = 12.34;
document.write("该数据类型是:" + typeof(num) +",---" + num + "<br>");
//声明一个空值
var test = null;
document.write("该数据类型是:" + typeof(test) +",---" + test + "<br>");
//声明一个不二类型的值
var bl = true;
document.write("该数据类型是:" + typeof(bl) +",---" + bl +"<br>");
</script>
5.JavaScrip中的调试
我们使用浏览器运行页面,那么我们写的代码如果出错,那么我们应该如何检查呢?这一个时候我们学习一个新的知识技能点,就是使用浏览器来调试,这一个时候对浏览器就有要求了,一般在使用的时候使用最主流的浏览器(谷歌和火狐)。那么该如何调试呢?下面我写一个小例子来给大家演示一下:
右键点击鼠标,选择检查跳转到相关的页面
我们写的代码是:
<script type="text/javascript">
var user="tom";
var age = 20;
var sexIsBoy=true;
console.log("输出的信息是:" + user + "---" + nation + "---" + age);//nation没定义
</script>
修改之后的代码效果如下:
我们发现通过上述的小例子,我们可以发现如何查找一些基本的错误和问题以及相关的代码问题。 这对于我们调节有关JavaScript的代码会有很大的好处。