本文介绍JavaScript在Web开发中的基础应用，涵盖如何创建注册表单、通过事件监听实现用户名非空及密码长度校验，并解析JavaScript中==与===运算符在类型转换上的关键区别及条件运算符用法。
JavaScript 基础概述
JavaScript 是目前全球应用最广泛的脚本语言之一。
作为一种专为 Web 设计的语言，JavaScript 兼容 PC、笔记本电脑、平板电脑以及智能手机等多种终端设备。
其核心设计目标之一，是赋予 HTML 页面动态交互的能力。
许多 HTML 开发者并非专业程序员，但得益于 JavaScript 简洁的语法特性，他们也能轻松地将小型脚本片段嵌入网页中。
该语言具备轻量级、通用性强、易于嵌入 HTML 设计以及学习门槛低等主要特点。
注册表单与校验实现
接下来我们将构建一个 JavaScript 注册表单的初步模型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-注册表单</title>
<script>
// 在页面加载时，执行指定函数
window.onload = function () {
// document.getElementById() 获取用户输入的用户名的标签对象;
var uEle = document.getElementById('username');
// 弹出警示框
alert(uEle);
// 获取对象里面的值
var uValue = uEle.value;
alert(uValue)
}
</script>
</head>
<body>
<form action="#" method="get">
<!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
post: 填写的信息不会在url里面显示
-->
用户名：<input type="text" name="username" placeholder="用户名" id="username">
<br>
密码：<input type="password" name="passwd" placeholder="密码" id="passwd">
<br>
<input type="submit" value="注册">
</form>
</body>
</html>
在此基础上，进一步实现完整的表单校验功能。
JavaScript 代码可以在特定事件触发时执行，例如当用户在 HTML 元素上发生点击行为时。
若要在用户点击元素时运行代码，需在对应的 HTML 事件属性中嵌入 JavaScript 代码。
onclick=JavaScript具体校验需求包括：检查用户名是否为空，以及验证密码长度是否超过 6 位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-检测用户名</title>
<script>
function checkForm() {
var nameValue = document.getElementById('username').value;
if (nameValue ===''){
alert('用户名不能为空！');
return false
}
var passValue = document.getElementById('passwd').value;
if (passValue.length <= 6){
alert('密码长度需大于6');
return false
}
}
</script>
</head>
<body>
<!--
实现步骤:
1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
2. 对这个事件绑定一个函数(执行的操作写在函数里面);
3. 函数的核心功能: 校验用户名是否为空?
1). 获取输入用户名标签提交的内容；
2). if判断用户名是否为空?
3). 如果数据合法， 继续执行， 提交表单；
4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
-->
<!--onsubmit 事件会在表单中的确认按钮被点击时发生-->
<form action="#" method="get" onsubmit="return checkForm()">
用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
<input type="submit" value="注册">
</form>
</body>!
</html>
运算符与条件赋值
随后介绍 JavaScript 中的运算符使用。
与 Python 不同，JavaScript 在比较运算符 '==' 中会将字符串自动转换为数值进行比较，而 '===' 运算符则要求类型和值完全一致。
5 =='5' --> true
5==='5' --> false条件运算符可根据特定条件对变量进行赋值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-等号</title>
<script>
var x = 5;
var y = '5';
alert(x===y);
var num =(5==='5')?'ok':'not ok '
alert(num)
</script>
</head>
<body>
</body>
</html>
