【开发】JavaScript学习笔记
【开发】JavaScript学习笔记
JavaScript是一门跨平台、面向对象的脚本语言，用于控制网页行为，能使网页可交互
引入方式
内部脚本
可以把JS代码定义在HTML页面中，位于<script>标签之内：
<script>
alert("Hello JavaScript");
</script>
外部标准
就像下面这样：
// js/hello.js
alert("Hello JS");
<script src="js/hello.js"></script>
注：script标签不能自闭合
基本语法
书写语法
- 一切区分大小写
- 每行结尾分号可有可无
- 注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
- 大括号表示代码块
输出语句
- window.alert()写入警告框
- document.write()写入HTML输出
- console.log写入浏览器控制台
// js/output.js
window.alert("alert-Hello JS");
document.write("write-Hello JS");
console.log("log-Hello JS");
这样写的话，打开时会弹窗给出"alert-Hello JS"，网页内容为"write-Hello JS"，F12打开控制台会有"log-Hello JS"的输出
变量
JS用var关键字定义变量
var test = 20;
test = "string";
JS是一门弱类型语言，变量可以存放不同的值
变量名遵守以下规则：
- 组成字符可以是字母、数字、下划线、美元符号
- 数字不能开头
- 建议驼峰命名
此外，新标准中新增了两种变量
- let：只在let关键字定义的代码块中有效
- const：用来声明一个只读常量
数据类型
JS中分为原始类型和引用类型
原始类型有：
- number
- string（字符串可为单引号）
- boolean
- null
- undefined
可以用typeof运算符获取数据类型
// js/datatype.js
var age = 10;
var name = "Bob";
var isMale = true;
var nothing = null;
var noDefinition = undefined;
alert(typeof age);
alert(typeof name);
alert(typeof isMale);
alert(typeof nothing);
alert(typeof noDefinition);
这个实验中，nothing显示的type是object
运算符
- 一元运算符：++，--
- 算数运算符：+，-，*，/，%
- 赋值运算符：=，+=，……
- 关系运算符：>，<，>=，<=，!=，==，===，……
- 逻辑运算符：&&、||、!
- 三目运算符：A ? X : Y
流程控制
- if
- switch
- for
- while
- do……while
函数
利用function关键字
// js/function.js
function add(a, b) {
return a + b;
}
alert("3 + 4 = " + add(3, 4));
也可以用变量的定义方式
var sub = function(a,b) {
return a - b;
}
alert("3 - 4 = " + sub(3, 4));
对象
- Array
定义方式：
var name = new Array(元素列表);
var name = [元素列表];
JS数组类似于Java集合，Array的长度和类型都可以改变
访问：
arr[index] = value;
属性与方法：
arr.length: // 长度
arr.push(value); // 添加
arr.splice(start, deleteCount); // 删除
更多的属性与方法需要查阅手册
- String
定义方式：
var name = new String(str);
var name = str;
属性与方法：
length; // 长度
charAt(index); // 对应位置元素（从0开始）
indexOf(str); // 查询子串所在位置（不存在返回-1）
- Window
Window是浏览器窗口对象
alert()方法其实是Window对象的，但是可以省略
可以通过查表使用这一对象的行为
- 自定义对象
通过下面这个例子可以大概知道对象的创建：
// js/customized.js
var person = {
name: "George",
age: 18,
tell: function() {
alert("I am " + this.name);
}
};
person.tell();
注：
- 对象的属性在对象内部是需要显式声明的，意思是this.name不能省略为name，否则会被认为是window的属性
- 这是一个“对象”而非“类”，如果需要创建“类”的话，就要声明为class，并且有构造函数，写法类似Python
小实验
这个实验是基于setInterval定时器方法的程序，首先setInterval()方法调用如下：
setInterval(function, timeout);
即每隔timeout时间执行function
// js/time.js
function situation1() {
document.getElementById('myImage').src = '../sources/a.png';
}
function situation2() {
document.getElementById('myImage').src = '../sources/d.png';
}
var x = 0;
setInterval(function() {
if (x % 2 === 0) {
situation1();
} else {
situation2();
}
x++;
}, 1000);
这个代码的含义就是，每隔一秒切换图片的状态，其中document.getElementById()方法是为了html准备的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="situation1()" value="situation1">
<img id="myImage" border="0" src="sources/a.png" width="20%" height="20%">
<input type="button" onclick="situation2()" value="situation2">
<script src="/js/time.js"></script>
</body>
</html>
这样就实现了每秒切换图片的行为
BOM与DOM
BOM
BOM（Browser Object Model），浏览器对象模型，提供独立于内容而与浏览器窗口进行交互的对象，核心对象是window
- History对象
History对象指的是历史记录
采用window.history获取，window可省略
history.back(); // 加载history列表中的前一个URL
history.forward(); // 加载history列表中的下一个URL
- Location对象
Location是地址栏对象，用window.location获取，window可省略
属性：
location.href; // 设置或返回完整的URL
DOM
DOM（Document Object Model），文档对象模型，将标记语言的各个组成部分封装成对象
- Document：整个文档对象
- Element：元素对象，即标签对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
这个时候可以回看前面的小练习：
<img id="myImage" border="0" src="sources/a.png" width="20%" height="20%">
document.getElementById('myImage').src = '../sources/a.png';
JS的代码中，通过myImage这个id或者对应的标签对象，然后改变其src属性
W3C DOM被划分成3个不同的部分：
- 核心DOM：针对任何结构化文档的标准模型
- XML DOM：针对XML文档的标准模型
- HTML DOM：针对HTML文档的标准模型
接下来细讲一些方法：
- 获取Element对象
getElementById(id); // 根据id值获取单个对象
getElementsByTagName(tagName); // 根据标签名称获取对象数组
getElementsByName(name); // 根据name值获取对象数组
getElementsByClassName(className); // 根据class值获取对象数组
事件监听
HTML事件是指发生在HTML元素上的事情，如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
而事件监听就是通过JS在事件被侦测时执行代码
事件绑定
事件绑定有两种方式：
- 通过HTML标签中的事件属性进行绑定
<input type="button" onclick="on()">
function on() { ... }
- 通过DOM元素属性绑定
<intput type="button" id="btn">
document.getElementById("btn").onclick = function() { ... }
常用事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完整加载 |
| onsubmit | 表单提交时触发该事件 |
| onkeydown | 某个键盘按键被按下 |
| onmouseover | 鼠标被移到某个元素上 |
| onmouseout | 鼠标从某元素移开 |
表单验证练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username"> <br>
<span id="username_error" class="error_message" style="display: none">用 户 名 不 彳 亍</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password"> <br>
<span id="password_error" class="error_message" style="display: none">密 码 不 彳 亍</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs">
<input name="tel" type="text" id="tel"> <br>
<span id="tel_error" class="error_message" style="display: none">手 机 号 不 彳 亍</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注册" type="submit" id="reg-btn">
</div>
</form>
<script>
var usernameInput = document.getElementById('username');
usernameInput.onblur = checkUsername;
function checkUsername() {
var username = usernameInput.value;
var flag = username.length >= 6 && username.length <= 12;
if (flag) {
document.getElementById('username_error').style.display = 'none';
} else {
document.getElementById('username_error').style.display = '';
}
return flag;
}
var passwordInput = document.getElementById('password');
passwordInput.onblur = checkPassword;
function checkPassword() {
var password = passwordInput.value;
var flag = password.length >= 6 && password.length <= 12;
if (flag) {
document.getElementById('password_error').style.display = 'none';
} else {
document.getElementById('password_error').style.display = '';
}
return flag;
}
var telInput = document.getElementById('tel');
telInput.onblur = checkTel;
function checkTel() {
var tel = telInput.value;
var flag = tel.length == 11;
if (flag) {
document.getElementById('tel_error').style.display = 'none';
} else {
document.getElementById('tel_error').style.display = '';
}
return flag;
}
var regForm = document.getElementById("reg-form");
regForm.onsubmit = function() {
var flag = checkUsername() && checkPassword() && checkTel();
if (flag) {
alert("注册成功！");
} else {
alert("注册失败！");
}
return flag;
}
</script>
</body>
</html>
这一个代码主要学习的是事件交互的使用
正则表达式
正则表达式定义了字符串组成的规则
定义方式
- 直接量：不加引号
var reg = /^\w{6, 12}$/;
- 创建RegExp对象
var reg = new RegExp("^\\{6, 12}$");
方法与语法
方法是text(str)判断字符串是否符号规则
| 符号 | 语法含义 |
|---|---|
| ^ | 开始 |
| $ | 结束 |
| [] | 某个范围内单个字符，如[0-9] |
| . | 任意单个字符，除了换行和结束符 |
| \w | 单词字符：字母数字下划线 |
| \d | 数字字符 |
| + | 至少一个 |
| * | 零个或多个 |
| ? | 零个或一个 |
{x} |
x个 |
{m, } |
至少m个 |
{m, n} |
至少m个，至多n个 |
所以前面的正则表达式：
var reg = /^\w{6, 12}$/;
指的是有6到12个单词字符
浙公网安备 33010602011771号