JavaScript综合项目:博客前端

文章目录

    • 项目1 博客前端:理解JavaScript库
      • 一、项目介绍
        • 1、博客主页
        • 2、微博主页
      • 二、理解JavaScript库
      • 三、创建基础库

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

一、项目介绍

流行的网站,大量使用前端的Web应用,估计就是博客系统。博客系统分为两种:一种是博客,另一种是微博(一句话博客)。

1、博客主页

JavaScript综合项目:博客前端_第1张图片

2、微博主页

JavaScript综合项目:博客前端_第2张图片
不管在博客和微博,都采用大量的JavaScript特效,有图片广告、下拉菜单、表单验证、弹窗、轮播器等一系列东西。我们创建一个项目,将上面应用较多的效果编写出来。

二、理解JavaScript库

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

三、创建基础库

我们创建一个名为base.js的基础库,封装常用的代码,以后不断进行扩展。
最常用的代码或许是获取节点的方法,我们将其封装到base.js文件里。
JavaScript综合项目:博客前端_第3张图片

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页面进行测试:
JavaScript综合项目:博客前端_第4张图片


<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>

运行效果如下:
JavaScript综合项目:博客前端_第5张图片
本项目不是为了做一个博客或微博,而是将里面的各种效果拿出来模仿编写。

你可能感兴趣的:(网页三剑客)