JAVA Web学习(4)___第3章 JavaScript脚本
2019-08-14 本文已影响0人
岁月静好浅笑安然
3.3 流程控制语句(和java一样这里就简略带过)
3.3.1 if条件语句
语法格式
if (condition)
{
当条件为 true 时执行的代码
}else{
当条件为 true 时执行的代码
}
3.3.2 switch多分支语句
语法格式
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
3.3.3 for循环语句
语法格式
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
3.3.4 while循环语句
语法格式
while (条件)
{
需要执行的代码
}
3.3.5 do...while循环语句
语法格式
do
{
需要执行的代码
}
while (条件);
3.3.6 break和continue语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
3.4 函数
3.4.1 函数的定义
语法格式
function functionName(parameters) {
statements;
[return expression;]
}
- functionName，必须项，函数的名字，一个页面中函数的名字是唯一的，区分大小写
- parameters，可选项，用于指定参数列表，当使用多个参数时，参数间用逗号隔开
- statements，必选项，是函数体
- expression 可选项，用于返回函数值
3.4.1 函数的调用
示例代码
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20
3.5 事件处理
3.5.1 什么是事件处理
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为，也可以是用户行为。
3.5.2 JavaScript常用事件
JavaScript的常用事件
| 事件 | 描述 |
|---|---|
| onabort | 图像的加载被中断。 ( <object>) |
| onblur | 元素失去焦点时触发 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
| onclick | 用户点击 HTML 元素 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>) |
| onfocus | 元素获取焦点时触发 |
| onkeydown | 某个键盘按键被按下。 |
| onkeyoress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 浏览器已完成页面的加载 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 表单重置时触发 |
| onresize | 窗口或框架被重新调整大小。 |
| onscroll | 当文档被滚动时发生的事件。 |
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
| onsubmit | 表单提交时触发 |
| onunload | 用户退出页面。 ( <body> 和 <frameset>) |
更多事件参照JavaScript参考手册 -HTML DOM事件
3.5.3 事件处理程序的调用
1.在 JavaScript中
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaWeb自学</title>
</head>
<body>
<button onclick="getDate()">现在的时间是?</button>
<p id="demo"></p>
<script>
function getDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</body>
</html>
2.在 HTML中
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaWeb自学</title>
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
</html>
3.6常用对象
3.6.1 Window 对象
1.属性
| 属性 | 描述 |
|---|---|
| document | 对 Document 对象的只读引用。(请参阅对象) |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| length | 设置或返回窗口中的框架数量。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| name | 设置或返回窗口的名称。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的父窗口。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| closed | 返回窗口是否已被关闭。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
2.方法(常用)
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| prompt() | 显示可提示用户输入的对话框。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| close() | 关闭浏览器窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| print() | 打印当前窗口的内容。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
3.6.2 String 对象
1.语法格式
var txt = new String("string");
或者更简单方式：
var txt = "string";
2.属性
| 属性 | 描述 |
|---|---|
| length | 字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
3.方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接两个或更多字符串，并返回新的字符串。 |
| fromCharCode() | 将 Unicode 编码转为字符。 |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
| includes() | 查找字符串中是否包含指定的子字符串。 |
| lastIndexOf() | 从后向前搜索字符串，并从起始位置（0） 开始计算返回字符串最后出现的位置。 |
| match() | 查找找到一个或多个正则表达式的匹配。 |
| repeat() | 复制字符串指定次数，并将它们连接在一起返回。 |
| replace() | 在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。 |
| search() | 查找与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| split() | 把字符串分割为字符串数组。 |
| startsWith() | 查看字符串是否以指定的子字符串开头。 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| trim() | 去除字符串两边的空白 |
| toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写。 |
| toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写。 |
| valueOf() | 返回某个字符串对象的原始值。 |
| toString() | 返回一个字符串。 |
3.6.3 Date 对象
1.语法格式
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
2.属性
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的 Date 函数的引用。 |
| prototype | 使您有能力向对象添加属性和方法。 |
3.方法(常用)
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
3.6.4 Array 对象
1.语法格式
var cars = ["Saab", "Volvo", "BMW"];
2.属性
| 属性 | 描述 |
|---|---|
| constructor | 返回创建数组对象的原型函数。 |
| length | 设置或返回数组元素的个数。 |
| prototype | 允许你向数组对象添加属性或方法。 |
3.方法(常用)
| 方法 | 描述 |
|---|---|
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| sort() | 对数组的元素进行排序。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| findIndex() | 返回符合传入测试（函数）条件的数组元素索引。 |
| valueOf() | 返回数组对象的原始值。 |
3.6.5 Math 对象
Math 对象教程，请参JavaScript Math 对象教程。
3.6.6 Number 对象
1.语法格式
var num = new Number(value);
2.属性
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的 Number 函数的引用。 |
| MAX_VALUE | 可表示的最大的数。 |
| MIN_VALUE | 可表示的最小的数。 |
| NEGATIVE_INFINITY | 负无穷大，溢出时返回该值。 |
| NaN | 非数字值。 |
| POSITIVE_INFINITY | 正无穷大，溢出时返回该值。 |
| prototype | 允许您可以向对象添加属性和方法。 |
3.方法(常用)
| 方法 | 描述 |
|---|---|
| isFinite | 检测指定参数是否为无穷大。 |
| toExponential(x) | 把对象的值转换为指数计数法。 |
| toFixed(x) | 把数字转换为字符串，结果的小数点后有指定位数的数字。 |
| toPrecision(x) | 把数字格式化为指定的长度。 |
| toString() | 把数字转换为字符串，使用指定的基数。 |
| valueOf() | 返回一个 Number 对象的基本数字值。 |
3.6.7 RegExp 对象
正则表达式是描述字符模式的对象。请参考JavaScript RegExp教程
