前端开发_JavaScript_数据类型、变量和调试工具

最新推荐文章于 2023-12-25 11:43:12 发布

魔笛手7

最新推荐文章于 2023-12-25 11:43:12 发布

阅读量373

点赞数 2

分类专栏：前端文章标签： javascript 前端变量声明 HelloWolrd案例调试

本文链接：https://blog.csdn.net/u013185175/article/details/122101857

版权

前端专栏收录该内容

75 篇文章 8 订阅

订阅专栏

数据类型、变量和调试工具

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的代码会有很大的好处。

魔笛手7

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发_JavaScript_数据类型、变量和调试工具

数据类型、变量和调试工具1.引入我们在上一节课中对JavaScript进行了一个简介，下面我们正式的进入JavaScript代码的学习。2.JavaScript之HelloWolrd 我们在写第一个JavaScript程序的时候需要明确两个内容:①.我们应该在页面的哪一个位置写入我们的JavaScript代码(直接写在页面上是不行的，因为浏览器只能接下标签和样式)。②:如何把字符串"HelloWorld"写到当前的页面上去。问题1解决方法: HTML 中的脚本必须...
复制链接

扫一扫