【Web前端学习笔记】Javascript_01_变量，数据类型，类型转换

最新推荐文章于 2024-06-06 20:19:17 发布

love__nana

最新推荐文章于 2024-06-06 20:19:17 发布

阅读量351

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： javascript 数据类型变量名内部方式类型转换

本文链接：https://blog.youkuaiyun.com/wpf719971425/article/details/77943718

Web前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍JavaScript的基础使用，包括JS的初步体验、注释方法、常用函数、变量定义与数据类型、类型转换等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript_01

A.JS的使用

1.JS的初步体验

示例：用js来校验用户名的规则：4~14位数字或者字母组成

<head>
		<meta charset="UTF-8">
		<title>javascript的初步体验</title>
		<script type="text/javascript">
			// 触发这个函数：checkName
			function checkName() {
				// 获取用户名中的内容的值
				var userName = document.getElementById("userName").value;
				// 定义正则表达式
				var reg = /^[a-z0-9]{4,14}$/
				// 开始校验
				if (!reg.test(userName)) {
					window.alert("用户名格式错误")
					return false;
				}
				return true;
			}
		</script>
	</head>

	<body>
		<form action="back.html" method="post" onsubmit="return checkName()">
			用户名：<input type="text" id="userName" name="username" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>

back.html

<head>
		<meta charset="UTF-8">
		<title>后台</title>
	</head>
	<body>
		正在执行....
	</body>

输入格式错误

输入正确，页面跳转

2.Javascript的使用

a.注释

只有单行注释和多行注释，与Java使用方法相同

b.常用的两个函数

1）alert("提示框");

<head>
		<meta charset="UTF-8">
		<title>内部方式</title>
		<script type="text/javascript">
			// 输出在一个提示框
			alert("hello world");
		</script>
	</head>

2）document.write("向浏览器输入内容");

<head>
		<meta charset="UTF-8">
		<title>内部方式</title>
		<script type="text/javascript">
			// 带空格
			document.writeln("hello world");
			// 不带空格
			document.write("hello world");
			document.write("hello world");
		</script>
	</head>

c.Javascript内部方式：

如上一条：在head标签体体中来进行书写脚本代码

弊端：html标签和代码混合时候不利于维护

d.Javascript外部方式：

在head标签外面书写script标签：是一个有标签体的标签：有开始有结束

单独建立一个js文件
// 输出hello world
document.write("hello world");
再引用js文件
<head>
		<meta charset="UTF-8">
		<title>外部方式</title>
		<script src="js/helloworld.js" type="text/javascript" charset="utf-8"></script>
	</head>

B.JS中的变量和数据类型

1.定义变量

格式：var 变量名 = 值;

2.注意

a.使用var定义同一个变量名，后面定义的变量会覆盖前面定义的变量

b.使用关键单词var可以定义重复的变量

c.var可以定义任何数据类型--->js是一种弱类型语言

d.在js中，变量的数据类型是通过值来确定的

e.如果定义了一个变量，但没有赋值，那么它的值是:undefined:未定义变量,未定义变量不能直接使用

3.查看数据类型

typeof(变量名)

4.数据类型分类

a.数字类型number：不管整数和小数，都是number

b.字符串类型string：不管字符和字符串，都是string

c.布尔类型boolean

d.对象类型object

<head>
		<meta charset="UTF-8">
		<title></title>
		<!--方便演示，使用内部方法-->
		<script type="text/javascript">
			var a;				// undefined
			var b = 3.14;		// number
			var c = 'c';		// string
			var d = true;		// boolean
			var e = "hello";	// string
			var f = new Object()// object
			document.write("a的值是：" + a + ",数据类型是：" + typeof(a) + "<br />")
			document.write("b的值是：" + b + ",数据类型是：" + typeof(b) + "<br />")
			document.write("c的值是：" + c + ",数据类型是：" + typeof(c) + "<br />")
			document.write("d的值是：" + d + ",数据类型是：" + typeof(d) + "<br />")
			document.write("e的值是：" + e + ",数据类型是：" + typeof(e) + "<br />")
			document.write("f的值是：" + f + ",数据类型是：" + typeof(f) + "<br />")
		</script>
	</head>

C.类型转换

1.类转换函数的应用

js中，数据类型是通过变量的值进行决定的

string--->number："10"--->10

2.转换函数

a.parseInt(变量名)

b.parseFloat(变量名)

注意事项：如果该值第一个是数值类型，那么就依次转换；

如果进来是一个非数值类型,这里面的值会变成一个NaN

<head>
		<meta charset="UTF-8">
		<title>类型转换函数</title>
		<!--导入外部的js文件：外部方式：
			script
				src属性导入外部js
		-->
		<script src="js/01.js" type="text/javascript" charset="utf-8"></script>
	</head>

外部js文件

// 定义一个变量
var a = "10";
//var a = "10a"; 第一个是数值，所以转换为10
//var a = "a10"; 第一个是a，所以转换为NaN

document.write("a的值是：" + a + ",a的数据类型(转换前)是：" + typeof(a) + "<br />");

// 转换
a = parseInt(a);
document.write("a的值是：" + a + ",a的数据类型(转换后)是：" + typeof(a) + "<br />");

// 定义一个变量
var b = "3.14";

document.write("b的值是：" + b + ",b的数据类型(转换前)是：" + typeof(b) + "<br />");

// 转换
b = parseFloat(b);
document.write("b的值是：" + b + ",b的数据类型(转换后)是：" + typeof(b) + "<br />");