![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
一、函数的调用
直接调用函数的方式，this指向的全局对象window;
1、作为一个函数调用
不带参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的调用</title>
</head>
<body>
<script type="text/javascript">
function myfun( ){
document.write('欢迎来到PHP中文网!');
}
myfun()
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
带参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的调用</title>
</head>
<body>
<script type="text/javascript">
function myfun(a,b){
document.write(a*b);
}
myfun(20,6);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
函数表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的调用</title>
</head>
<body>
<script type="text/javascript">
var add=function(x,y ){return x+y};
document.write(add(10,5));
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、函数作为方法调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的调用</title>
</head>
<body>
<script type="text/javascript">
var myobj={
firstName:"灭绝",
lastName:"师太",
fullName:function(){
return this.firstName + this.lastName;
}
}
document.write(myobj.fullName()); 获取对象
document.write(myobj.firstName); 获取对象内的一个属性值
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、JavaScript闭包
全局变量和局部变量
函数内部变量是局部变量
函数外部的变量是全局变量
闭包就是能够读取其他函数内部变量的函数
变量的作用域无非就是两种：全局变量和局部变量
子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
注意点1：函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
注意点2：子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript闭包</title>
</head>
<body>
<script type="text/javascript">
function one(){
var x=50;
function two(){
var y=100;
document.write(x);
}
return two();
}
one();
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、什么是HTML DOM？
所谓DOM(HTML Document Object Model)，即HTML 文档对象模型,其作用是定义了访问和处理 HTML 文档的标准方法。HTML DOM 把 HTML 文档中的标签、属性和文本当做节点，将它们呈现为带有元素、属性和文本的树结构（节点树）。
节点（Node）
在DOM中，HTML 文档中的每个成分都是一个节点（node）;
1. 整个文档是一个文档节点 ；
2. 每个 HTML 标签是一个元素节点 ；
3. 包含在 HTML 元素中的文本是文本节点 ；
4. 每一个 HTML 属性是一个属性节点 ；
5. 注释属于注释节点 ；
在DOM中，节点是有层次划分的，这些关系是相对的;
父节点：在上图中，<head>节点是<title>节点和<meta>节点的父节点；
子节点：在上图中，<h1>节点和<p>节点是<body>的子节点；
同级节点：在上图中，<h1>节点和<p>节点是同级节点，<title>节点和<meta>节点是同级节点；
祖先：在上图中，<html>节点和<body>节点都是<p>节点的祖先（祖辈）；
后代：在上图中，<body>节点和<p>节点都是<html>节点的后代（后辈）；
访问节点
(1) document.getElementById(id)
通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.返回的是单个节点
(2) document.getElementsByName(name)
仅用于inputradio checkbox等元素,返回名字为name的元素数组返回的是节点列表
(3) document.getElementsByTagName(tagname)
返回具有tagname的元素列表数组.处理大的DOM结构会用到它返回的是节点列表
获取/设置节点的属性
1. 获取节点的属性值
语法：
node.getAttribute(属性名)
2. 设置节点的属性值
语法：
node.setAttribute(属性名,属性值)
获取/设置元素节点的内容
1、获取元素节点内容
语法：
node.innerHTML
2、设置元素节点内容
语法：
inner.innerHTML="我是灭绝"
四、语法小扩展
cursor: pointer 鼠标移上有个小手的效果；
onclick onclick事件 属性由元素上的鼠标点击触发。
五、作业小轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小轮播点击切换效果</title>
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width: 500px;height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
img{
width:500px;height: 300px;
}
p{
width:500px;
position: absolute;bottom: 10px;
z-index: 1000;
color: white;
text-align: center;
}
p span{
display: inline-block;
width: 20px;
height:20px;
text-align: center;
background: rgba(0,193,237,0.5);
border-radius: 50%;
line-height: 20px;
cursor: pointer; /*cursor: pointer鼠标移上有个小手的效果*/
}
</style>
</head>
<body>
<div id="photo">
<!-- 图片列表 -->
<a href=""><img src="static/images/1.jpg"></a>
<a href=""><img src="static/images/2.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/4.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<!-- 图片按钮 -->
<p>
<span onclick="change(0)">1</span>
<span onclick="change(1)">2</span>
<span onclick="change(2)">3</span>
<span onclick="change(3)">4</span>
<span onclick="change(4)">5</span>
</p>
</div>
<script type="text/javascript">
function change(num){
var obj=document.getElementById('photo')
var obj_a=obj.getElementsByTagName('a');
// 隐藏a
for(var i=0;i<obj_a.length;i++){
obj_a[i].style.display="none";
}
obj_a[num].style.display="block";
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例