JavaScript综合项目：博客前端

2024-04-26 17:35:34

文章目录

项目1 博客前端：理解JavaScript库
- 一、项目介绍
- - 1、博客主页
  - 2、微博主页
- 二、理解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>

运行效果如下：

本项目不是为了做一个博客或微博，而是将里面的各种效果拿出来模仿编写。

JavaScript综合项目：博客前端相关推荐

古文字识别助手与众包平台——项目博客三
古文字识别助手与众包平台--项目博客三背景: 由于骨刻文项目存在许多骨刻文的静态图片,为了前端能够快速获取到相应的图片,后端打算再部署一个nginx静态服务器,用来存取在项目中客户上传的各种图片.同 ...
html5设计博客论文,基于HTML5的综合类博客设计与实现-计算机本科毕业论文
基于HTML5的综合类博客设计与实现-计算机本科毕业论文 (35页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.9 积分 HUNAN JtfSlVE ...
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（五）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(五) 转载于:https://github.com/Meowv/Blog 上篇文章完成了文章详情页数据查询和清除缓存 ...
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（四）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(四) 转载于:https://github.com/Meowv/Blog 上篇文章完成了文章增删改的接口和友情链接列 ...
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（三）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(三) 转载于:https://github.com/Meowv/Blog 上篇文章完成了分类和标签页面相关的共6个接 ...
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（二）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(二) 转载于:https://github.com/Meowv/Blog 上篇文章完成了两个接口:文章列表页.文章详 ...
古文字识别助手与众包平台——项目博客五
古文字识别助手与众包平台--项目博客五背景: 由于本项目算法部分为使用python编写,所以需要在springboot中调用外部的python程序进行计算本项目算法评分模块. 在登录功能和社区功能的 ...
古文字识别助手与众包平台——项目博客二
古文字识别助手与众包平台--项目博客二背景: 由于众包算法的系统是为了让更多的人通过描绘图像而获取更多的原始数据,所以在手机端的功能流程不能做的太复杂,否则用户会直接被过于复杂的流程劝退,于是,经过 ...
古文字识别助手与众包平台——项目博客一
古文字识别助手与众包平台--项目博客一项目背景: 从目前的考古发掘看,尚未明确证实发现有关夏代的文字资料.但种种迹象表明,夏朝的文字是存在的.山东大学考古美学研究所刘凤君教授在2005年在山东等地发 ...

最新文章

热门文章