「趣学前端」给不懂技术的朋友简单演示,代码是怎么被编写出来的

简介: 我身边不乏非程序员的朋友,对我的工作多多少少带点好奇心。突发奇想,准备了一个小功能,简单演示前端日常开发中的代码是怎么被编写出来的。

灵感来源

我的家人和身边非程序员的朋友们,对我的工作多多少少带点好奇心。尤其是家人学会使用智能手机,应用程序千千万,七彩界面迷人眼。这当中,总有某块功能是前端开发写出来的,比如某个小程序,比如某个登录界面,比如某个动画效果。

于是我准备给不懂技术的朋友演示一下,登录的时候,那个输入账号的框框是怎么做到的。

手把手教学,一对一服务,只讲怎么写,不讲基础知识点。喜欢搭积木,是不必知道生产商是怎么把积木制造出来的。一键复制粘贴,熟悉的那个功能就出来了。


在线预览

讲解代码放到了在线预览平台,可查看完整代码,并体验效果。



功能实现

  • 左侧是可选的功能列表,包含本次所有可查看代码的功能;
  • 右上是选择的功能展示;
  • 右下是选择的功能代码展示,展示采用IDE风格,含复制代码功能。

实现代码回显

itemClick=functionshow(type) {
lettitleObj= {
text: '姓名 :',
radio: '性别 :',
checkbox: '爱好 :',
select: '早餐 :',
textarea: '留言 :',
link: '新闻 :',
  };
letitem=rightBottomArea[type];
letitemTitle=titleObj[type];
rightHeadTitle.innerHTML=itemTitle;
rightHeadForm.innerHTML=item;
rightBottom.style.display='block';
rightBottomForm.innerHTML=item;
copyText=item;
};

复制功能

复制功能就一个创建新元素、元素赋值、赋值、移除元素的过程。

  • 使用document的createElement方法可以创建html元素;首先创建一个input元素;
  • 为body添加这个input元素;
  • 将要复制的内容赋值给input元素;
  • 选中input元素中的所有内容;
  • 使用document的execCommand方法进行拷贝当前选中内容到剪贴板;
  • 移除input元素。
functioncopy() {
// copy wordif (copyText) {
lettransfer=document.createElement('input');
document.body.appendChild(transfer);
transfer.value=copyText;
transfer.focus();
transfer.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
    }
transfer.blur();
document.body.removeChild(transfer);
alert('已复制!');
  }
}

操作演示

功能完成之后,我开始给我的朋友演示如何操作获取一段代码块。

第一步

选中一个想查看代码的功能项,比如性别(单选按钮)。

第二步

将查看的功能的代码进行复制。

第三步

将代码粘贴到一个空档html文档中。

第四步

运行这个新建的html文档,刚才的单选功能就出来啦。


后续

我给我的朋友演示了一下,我的怨种朋友惊叹原来编程这么简单,她跃跃欲试转变当兴趣班学一下,盲目自信的她没有发现我看她的目光是多么的意味深长。

正所谓:

一入前端深似海,学完这个学那个。

轮子造了千千万,到头只是个入门。

看完开发者大会,发现又要整活了。

欲知何谓大前端,新出特性了解下。

目录
相关文章
|
5天前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
12天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
82 29
|
5天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
13 3
|
5天前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
5天前
|
前端开发 JavaScript
前端界的革命:掌握这些新技术,让你的代码简洁到让人惊叹!
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法,极大减少了代码冗余。React通过虚拟DOM和组件化思想,提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割,优化了应用性能和加载速度。这些新技术正引领前端开发的革命,使代码更加简洁、高效、可维护。
9 2
|
5天前
|
前端开发 JavaScript 测试技术
前端工程师的必修课:如何写出优雅、可维护的代码?
前端工程作为数字世界的门面,编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面,提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习,前端工程师可以写出高效且易于维护的代码,为项目的成功打下坚实基础。
13 2
|
11天前
|
监控 前端开发 JavaScript
前端开发的终极奥义:如何让你的代码既快又美,还不易出错?
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域,本文从性能优化、代码美化和错误处理三个方面,探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能;遵循命名规范、保持一致的缩进与空行、添加注释与文档,让代码更易读;通过输入验证、try-catch捕获异常、日志与监控,增强代码的健壮性。追求代码的“快、美、稳”,是每个前端开发者的目标。
27 3
|
11天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
23 3
|
11天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
19 2
|
10天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
17 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效