JavaScript综合项目：博客前端_js综合项目什么意思-优快云博客

本文链接：https://blog.youkuaiyun.com/howard2005/article/details/103483156

文章目录

- 项目1 博客前端：理解JavaScript库

项目1 博客前端：理解JavaScript库

一、项目介绍

流行的网站，大量使用前端的Web应用，估计就是博客系统。博客系统分为两种：一种是博客，另一种是微博（一句话博客）。

1、博客主页

在这里插入图片描述

2、微博主页

在这里插入图片描述
不管在博客和微博，都采用大量的JavaScript特效，有图片广告、下拉菜单、表单验证、弹窗、轮播器等一系列东西。我们创建一个项目，将上面应用较多的效果编写出来。

二、理解JavaScript库

JavaScript库就是把各种常用的代码片段，组织起来放在一个js文件里，组成一个包，这个包就是一个JavaScript库。现在有不少优秀的开源JavaScript框架，比如jQuery、Prototype、Dojo、Extjs等。这些JavaScript库已经把最常用的代码进行了有效的封装，以方便我们开发，提高效率。本项目中，准备创建一个JavaScript库，有助于提供自己的JavaScript开发能力。

三、创建基础库

我们创建一个名为base.js的基础库，封装常用的代码，以后不断进行扩展。
最常用的代码或许是获取节点的方法，我们将其封装到base.js文件里。
在这里插入图片描述

var Base = {
	getId: function(id) {
		return document.getElementById(id);
	},
	getName: function(name) {
		return document.getElementsByName(name);
	},
	getTagName: function(tag) {
		return document.getElementsByTagName(tag);
	}
};

创建test.html页面进行测试：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试页</title>
		<script src="js/base.js"></script>
		<script>
			window.onload = function() {
				alert(Base.getId('box').innerHTML);
				alert(Base.getName('sex')[0].value);
				alert(Base.getTagName('div')[2].innerHTML);
			}
		</script>
	</head>
	<body>
		<div id="box">欢迎来到JavaScript编程世界！</div>
		<input id="man" type="radio" checked="checked" name="sex" value="男"/>男
		<input id="woman" type="radio" name="sex" value="女"/>女
		<div id="msg1">永不言弃</div>
		<div id="msg2">坚持到底</div>
	</body>
</html>