JS学习第四天总结_$funciotn-CSDN博客

本文链接：https://blog.csdn.net/weixin_44791254/article/details/88752140

1.函数复习

函数是JS的一等功公民（皇室成员）

函数的基本语法 function 函数名（参数1，参数2）{代码块}
第一步声明函数
第二部调用函数可以多次调用
函数的返回值 return关键字
- return后面不要写代码了，是不会执行的
- 加了return就有返回值，就可以接收并使用这个返回值

2.JS的作用

完成网页中一些常见的动效（轮播图、tab栏）
和用户进行交互（搜索栏）
游戏开发
canvas新的画布标签
服务器开发（nodeJS）

3.前端三层

HTML 结构层
CSS 样式层
JS 行为层控制HTML和CSS

4.常见的三个输出语句

alert（“你好”）完整写法是 window.alert(); window对象可以省略
- 使用不多，比较麻烦，要去点击
- 各个浏览器弹窗效果不一样
- 后期需要弹窗效果的话，一般都是div+css来完成
console.log(“你好”);
- 打印输出一些内容
- 排查错误
console.warn(“警告”);
console.error(“错误”);
document.write(“今天天气不好”);
- document.write("<h2>我是二级标题</h2>");

5.JS的三种书写方式

行内式
外链式外部引入之后，script标签中不能再写代码了，不会执行的
内嵌式相同的引号不能嵌套使用，可以单双引号嵌套使用

6.五种基本数据类型

number 数值型
string 字符串型
boolean 布尔值（false、true）
null 空（null）
undefined 未定义（undefined）

7.内置对象

JS本身自带的对象
- 日期对象
- Math对象
- window对象

8.获取一个元素

getElementById();方法，通过Id名获取某个元素（绝对是唯一的）。

9.变量及变量的作用域

var a=10;
全局变量在函数外部声明的变量在函数内部能够调用
局部变量在函数内部声明的变量在函数外部不能调用
函数中变量会优先使用局部变量，找不到才会调用全局变量

注意：
is not defined 未声明函数时报错内容
undefined 声明函数未赋值，显示的内容
null 是一个值，未赋值不会显示null

10.事件及事件三要素

事件三要素：

事件源关闭的按钮
事件鼠标点击事件
事件处理程序广告关闭了
常用的事件：
onclick
onmouseover
onmouseout
onload

实例练习

点击关闭广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>关闭广告</title>
		<style type="text/css">
			*{
				margin:0 auto;
				padding: 0;
			}
			#box{
				height:500px;
				width:100%;
				background-color:yellow;
				position: relative;
			}
			#span{
				width:40px;
				height:40px;
				font-weight: 700;
				line-height: 40px;
				display: block;
				background-color:red;
				border-radius: 20px;
				position:absolute;
				text-align: center;
				top:10px;
				right:10px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="count">
			<div id="box">
				<span id="span">X</span>
			</div>
		</div>
		<script type="text/javascript">
			var span=document.getElementById("span");
			var box=document.getElementById("box");
			span.function(){
				box.style.display="none";
			}
		</script>
	</body>
</html>

鼠标经过显示二维码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				position: relative;
				width:250px;
				height:290px;
			}
			#ewm{
				position: absolute;
				top:25px;
				left:25px;
				display: none;
			}
			#span{
				display: block;
				width:220px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color:red;
				font-size:30px;
				font-weight: 700;
				position: absolute;
				bottom:0;
				left:20px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/wx.png" id="ewm"/>
			<span id="span">二维码</span>
		</div>
		<script type="text/javascript">
			var ewm=document.getElementById("ewm");
			var span=document.getElementById("span");
			var box=document.getElementById("box");
			span.function(){
				ewm.style.display="block";
				box.function(){
					ewm.style.display="block";
				}				
			}
			span.function(){
				ewm.style.display="none";	
				box.function(){
					ewm.style.display="none";
				}
			}				
		</script>
	</body>
</html>

11.入口函数

window.funciotn(){
代码块;
}
页面加载完成后，再执行代码块。
JS文件引入是存在顺序关系的，如果存在依赖关系的JS文件，他们的引入顺序是不能变的。

12.两种消失的的区别

display：none； 消失后不占用原来位置
visibility：hidden； 消失后依旧占用原来位置

13.基本数据类型之间的转换

number变成字符串类型

12+"";
a=String(12);

字符串转换成number类型

“22”-0
Number(“22”)

number转成boolean类型

Boolean(20);// 返回true
Boolean(“hello”);// 返回true
Boolean("");// 返回false
Boolean(null);// 返回false
Boolean(undefined);// 返回false
Boolean(NaN);// 返回false
！！也可以转成Boolean值

14.五种假：

0
false
“”
null
undefined

15.isNaN

isNaN(参数); 里面的参数是数值类型返回false，不是返回true
判断机制和parseInt（）一样，能识别出字符串中打头的数字。

16.容器在页面居中显示

实现容器在页面中间显示，垂直水平都居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width:400px;
				height:400px;
				background-color:hotpink;
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin:auto;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

参考网站
CSS实现两端对齐效果一
 CSS实现两端对齐效果二
 CSS3 :nth-of-type()选择器