您的位置：首页 > Web前端 > JavaScript

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

2017-09-12 13:24 1261 查看
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 />");

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 数据类型 变量名 内部方式 类型转换
相关文章推荐
新的分享
章节导航