我的开源第7章 网页开发基础
7.3 JavaScript基础
7.3.1 DOM相关知识
获取文档中的指定元素
(1) 通过元素的id属性获取元素
document.getElementById("userId")
(2) 通过元素的name属性获取元素
document.getElementsByName("userName")[0]
7.3.2 javascript概述
- JavaScript的引入
两种方式:
(1) 内嵌式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内嵌式</title>
<script type="text/javascript">
document.write("内联式");
</script>
</head>
<body>
</body>
</html>
(2)外联式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外联式</title>
<script type="text/javascript" src="../js/demo01.js"></script>
</head>
<body>
</body>
</html>
- 数据类型
| 类型 | 含义 | 说明 |
|---|---|---|
| Number | 数值型 | 数值型数据不区分整型和浮点型,数值型数据不要用引号括起来 |
| String | 字符串类型 | 字符串是用单引号或双引号括起来的一个或多个字符 |
| Boolean | 布尔类型 | 只有true或false两个值同涂蘸液发婺时）分本和r |
| Object | 对象类型 | 一组数据和功能的键值对集合 |
| Null | 空类型 | 没有任何值 |
| Undefined | 未定义类型 | 指变量被创建,但未赋值时所具有的值 |
7.3.3 JavaScript的使用
- 函数的定义和调用
function语句格式:
function name(params) {
代码块
return xxx;
}
- 事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点这儿" name="btn" onclick="alert('Hello')" />
</body>
</html>
onclick代表当前事件类型为鼠标单击事件，alert()函数主要用于弹出警示对话框。
| 类型 | 事件 | 事件说明 |
|---|---|---|
| 表单事件 | onblur | 当前元素失去焦点时触发此事件 |
| onchange | 当前元素失去焦点并且元素内容发生改变时触发此事件 | |
| onfocus | 当某个元素获得焦点时触发此事件 | |
| onreset | 当表单被重置时触发此事件 | |
| onsubmit | 当表单被提交时触发此事件 | |
| 页面事件 | onload | 当页面加载完成时触发此事件阳年 |
- 常用对象
(1)Window 对象：可用于获取浏览器窗口的大小和位置，或设置定时器等。
| 属性/方法 | 说明 |
|---|---|
| document , history , location , navigator , screen | 返回相应对象的引用。例如，document属性返回document 对象的引用 |
| parent , self , top | 分别返回父窗口、当前窗口和最顶层窗口的对象引用 |
| innerWidth、 innerHeight | 分别返回窗口文档显示区域的宽度和高度 |
| outerWidth. outerHeight | 分别返回窗口的外部宽度和高度 |
| open() ,close() | 打开或关闭浏览器窗口 |
| alert() .confirm() .prompt() | 分别表示弹出警告框、确认框、用户输入框 |
| setTimeout() ,clearTimeout() | 设置或清除普通定时器 |
(2)Date对象
(3)String对象
