JavaScript基础入门
1.JavaScript简介
- JavaScript是一门开发web页面的前端脚本语言，主要解决与用户的动态交互问题。其主要有三大特点：简单、跨平台性、交互性。跨平台的含义是不依赖于特定的操作系统，绝大多数浏览器都支持JavaScript。
2.JavaScript与html的结合方式
（1）在head标签或body标签加入script标签书写JavaScript代码。
（2）使用script标签的src属性引入js文件
注：以上两种方式只能二选一。
3.JS变量
（1）定义
var 变量名;
var 变量名=值;
（2）变量类型
数值类型 | number |
字符串类型 | string |
对象类型 | object |
布尔类型 | boolean |
函数类型 | function |
（3）JavaScript的特殊值
undefined 未定义(没有被赋值的变量)
null 空值
NAN 非数值
4.JS数组
（1）数组的定义
var 数组名 = []; 定义空数组
var 数组名 = [123,“abc”,true]; 定义数组并赋值
注：javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
5.JS函数
（1）函数定义的两种方式
function 函数名(形参列表){
函数体
}var 函数名 = function(形参列表){
函数体
}6.{}花括号形式的自定义对象
（1）对象的定义
var 变量名 = {
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){ // 定义一个函数
}
};（2）对象的访问
变量名.属性 / 函数名();
7.JS中的事件
（1）事件的定义
事件是电脑输入设备与页面进行交互的响应。
（2）常用的事件
onload | 加载完成事件 | 常用于js代码的初始化 |
onclick | 单击事件 | 常用于按钮的点击响应 |
onblur | 失去焦点事件 | 常用于输入框失去焦点验证内容是否合法 |
onchange | 内容发生改变事件 | 常用于下拉列表框内容发生改变后操作 |
onsubmit | 表单提交事件 | 常用于表单提交前验证表单项是否合法 |
（3）事件注册
静态注册：通过 html 标签的事件属性直接赋于事件响应后的代码
动态注册：1、获取标签对象 2、标签对象.事件名 = function(){}
（4）代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onsubmitFun(){
alert("静态注册表单事件----发现不合法");
return false;
}
window.onload = function (){
var formObj = document.getElementById("form01");
formObj.onsubmit = function (){
alert("动态注册表单事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册">
</form>
<br/>
<form action="http://www.baidu.com" id="form01">
<input type="submit" value="动态注册">
</form>
</body>
</html>8.DOM模型
（1）定义
把文档中的标签，属性，文本，转换成为对象来管理。
（2）document对象常用的方法
getElementById | 通过id属性获取标签对象 |
getElementsByName | 通过name属性获取标签对象的集合 |
getElementsByTagName | 通过标签名获取标签对象集合 |
createElement | 用来创建html标签 |
（3）代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun(){
var usernameObj = document.getElementById("username");
var value = usernameObj.value;
var patt = /^\w{5,12}$/;
if(patt.test(value)){
alert("用户名合法！");
}else {
alert("用户名不合法！");
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username">
<button onclick="onclickFun()">按钮</button>
</body>
</html>
