Javascript_01
A.JS的使用
1.JS的初步体验
示例：用js来校验用户名的规则：4~14位数字或者字母组成
<head>back.html
<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>
<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再引用js文件
document.write("hello world");
<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>外部js文件
<meta charset="UTF-8">
<title>类型转换函数</title>
<!--导入外部的js文件：外部方式：
script
src属性导入外部js
-->
<script src="js/01.js" type="text/javascript" charset="utf-8"></script>
</head>
// 定义一个变量
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 />");
