微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

编写JS的流程详解

零下一度
发布： 2017-06-25 09:49:17
原创
2561人浏览过

html +css 静态页面

js        动态 交互

 

豆包AI编程
豆包AI编程

豆包推出的AI编程助手

豆包AI编程 483
查看详情 豆包AI编程

原理: js就是修改样式, 比如弹出一个对话框. 弹出的过程就是这个框由disable 变成display:enable. 又或者当鼠标指向的时候换一个颜色,就是一个修改样式的工具.

  • 编写JS的流程

    • 布局：HTML+CSS

    • 事件：确定用户做哪些操作（产品设计）

    • 编写JS：在事件中，用JS来修改页面元素的样式(外加属性：确定要修改哪些属性)

       

  • 什么是事件

 

一个完整的事件=  <在某个作用域   事件声明='函数动作'> </>

作用域:  作用的标签

事件声明：一个用户操作  例如: 鼠标的进出onmouseover, onmouseout,

函数动作: 一个封装好可以理解为比较复杂的动作.

事件声明也是这个作用域的某个属性, 函数就是这个属性作出的一系列动作

 

 

  • 函数的规范位置与封装

格式:

<script>

function+名称+()

{动作1+动作2+动作3+……}

</script>

 

位置: <script>: Js 代码标签, 函数一般放在head里面.

封装:

函数:  fuction+名称+()

  1. 在标签中放置未封装的代码会造成阅读者视觉混乱, 把整段整段的代码封装成函数, 再在标签中调用函数. 文挡会变得整洁.

  2. 当多个标签重复调用时同一个函数时,不用重复把整段代码再敲一遍, 只要调用函数的名字就可以了.

变量:var + 名字+()    

变量就是把一些结构复杂的对象赋值到一个简单的名称, 当调用的时候就会减少代码量.

 

<script>

function toGreen()

{ 

    var oDiv=document.getElementById('div1');动作1:div1赋值2给oDiv

     

    oDiv.style.width='300px';            动作2/3改变div1的宽度

    oDiv.style.height='300px';                      …….高度    

    oDiv.style.background='green';        动作4, 背景变成绿色

} 

</script>

注, 如果在script内有暂不运行的语句可以//注释掉

函数动作分层结构详解及Document.getElementById 释义:    (重点)

对象属性分为很多层, 用'.' 隔开每一层.后面的是前面的子属性(属性), 可以理解为汉语的'的'

实际上每个函数动作都是被分割开来的, 所以你们看到的是一节一节的,实际上举例子

oDiv.style.width='300px'; 这个动作, 是属于:

Document.getElementById('div1').style.width = '300px' 而这一整段又属于:

Window.Document.getElementById('div1').style.width = '300px'

这一整条就是一条完整的事件动作,

window是上层对象

document是二层对象

<节点>节点<节点>节点<节点>节点<节点>节点

getElementById是三层对象(方法)

style四层对象 (一层属性)

height 五层对象 (二层属性)

 

window 省略是因为,我们在html内操作, 默认是属于document

而因为我们定义了oDiv, 所以在最终的表达上变成了oDiv.style.width='300px';的形式.

至于Document是一个JS操作文档层面的方法(动作的方法), <html>文档的基本节点都要收它控制, 这些节点包括文本节点, 标签(属性)节点 . 所有尖括号外的范围都成为文本节点, 尖括号里面的脚属性节点. 如果我们不说是什么节点一般默认指的是尖括号里面的.

DOM(Document对象):

(方法就是我们上面描述的动作)

 

<html>

<head>

<metacharset="utf-8">

<title>无标题文档</title>

<style>

#div1 {

    width:200px;

    height:200px;

    background:red;

} 

</style>

<script>

function toGreen()

{ 

    var oDiv=document.getElementById('div1');

     

    oDiv.style.width='300px';

    oDiv.style.height='300px';

    oDiv.style.background='green';

} 

 

function toRed()

{ 

    var oDiv=document.getElementById('div1');

     

    oDiv.style.width='200px';

    oDiv.style.height='200px';

    oDiv.style.background='red';

} 

</script>

</head>

 

<body>

<div

@@######@@

</div>

</body>

</html>

 
id="div1" onmouseover="toGreen()" onmouseout="toRed()">
登录后复制

以上就是编写JS的流程详解的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：javascript对象之间存在的三种继承方式 下一篇：wireshark是如何抓取本地数据包的？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
JS注解是什么_ JS注解的概念与基本作用详解 JS注解并非JavaScript原生语法，而是通过JSDoc等工具实现的特殊注释形式，用于提供元数据、生成文档、增强类型提示；常见如@param、@returns用于描述函数参数与返回值，@deprecated标记过时方法，配合编辑器提升可读性与维护性；其本质为注释，不参与运行，区别于TypeScript中可执行的装饰器语法如@Component，后者在编译或运行时触发逻辑，具备实际功能。
2025-11-09 13:12:03
874
Vue 3：在现有DOM中独立挂载组件，无需全局根实例 本教程将指导如何在后端渲染的页面中，不依赖全局根#app元素，独立地将Vue3组件挂载到任意DOM元素上。我们将探讨使用Vue的createVNode和renderAPI进行手动挂载，并提供一个基于Vite的import.meta.glob实现，实现组件的自动化发现与挂载，从而实现Vue组件与传统页面内容的无缝集成。
2025-11-09 13:11:16
585
如何避免在修改数组状态时意外修改React状态 在React中处理包含对象的数组状态时，直接使用浅拷贝（如扩展运算符[...]）修改副本内的元素，可能导致原始状态意外变异。本文将深入探讨这一常见问题，并提供两种有效的深拷贝策略：现代的structuredClone()方法和针对特定数据结构的map()结合对象扩展运算符，确保React状态的不可变性。
2025-11-09 13:05:52
706
js中数组添加元素​unshift() 方法 unshift()方法向数组开头添加一个或多个元素，返回新长度并修改原数组。例如fruits.unshift(‘apple’)将‘apple’插入数组开头，fruits变为[‘apple’,‘banana’,‘orange’]，方法返回3；可一次性添加多个元素，如fruits.unshift(‘mango’,‘grape’)使数组变为[‘mango’,‘grape’,‘apple’,‘banana’,‘orange’]；注意该方法会改变原数组，返回值为新长度而非数组本身，且因需调整所有元素索引，
2025-11-09 12:55:31
604
JS注解怎么注释类_ JS类注解的书写规范与实际应用 JS中无原生注解，但可通过JSDoc添加文档说明、Decorator实现运行时修饰。1.JSDoc用于描述类功能、作者、示例等，提升可读性；2.Decorator为实验性语法，需TypeScript支持，可修饰类行为；3.两者可结合使用，JSDoc专注文档，Decorator增强逻辑；4.注意兼容性与维护性，合理选择适用场景。
2025-11-09 12:55:02
144
Python中Firebase用户删除的实现策略与Admin SDK应用 本文探讨了在Python中处理Firebase用户删除的策略。鉴于Python版FirebaseCloudFunctions目前不直接支持JavaScript中onDelete等用户删除事件监听器，文章将重点介绍如何利用firebase_admin.auth模块，通过编程方式实现用户的识别与删除，并提供详细的代码示例及使用注意事项。
2025-11-09 12:51:46
224
JavaScript中实现CSS nth-child逻辑：动态数组元素处理指南 本教程深入探讨如何在JavaScript中精确模拟CSS的:nth-child(An+B)选择器功能，特别针对动态数组元素的处理场景。文章将分析直接乘法和模运算在实现复杂周期性选择时的局限性，并提供一个基于for循环的通用函数解决方案，帮助开发者灵活地根据索引规则选择和处理数组中的特定元素，从而实现复杂的样式或数据逻辑。
2025-11-09 12:42:16
937
JS与SpringBoot条件化Bean加载配合的教程 答案：通过API暴露SpringBoot条件化Bean状态，前端JavaScript根据返回配置动态调整行为，实现前后端协同。
2025-11-09 12:35:02
178
解决 Titanium iOS 构建失败：Ld normal 错误的指南 本文旨在解决TitaniumiOS项目在模拟器上运行时常见的Ldnormal构建失败错误，特别是针对使用旧版TitaniumSDK(如12.0.0GA)的情况。核心解决方案是升级到最新的TitaniumSDK版本，因为旧版本存在已知的编译问题。文章还将提供备用方案和进一步的故障排除建议，确保您的iOS应用顺利构建和运行。
2025-11-09 12:16:21
825
JS函数怎样定义自执行函数_JS自执行函数定义与执行机制详解 自执行函数是一种在定义时立即执行的函数表达式，用于创建独立作用域并防止变量污染全局。其基本结构为(function(){}())，通过括号将函数转为表达式以避免语法错误。常见写法包括!function(){}()、+function(){}()等，均可实现立即执行。它可传入参数如window或jQuery，确保内部使用安全且不依赖外部环境。尽管ES6模块普及后使用减少，但在老项目和插件中仍广泛存在。
2025-11-09 12:10:07
551
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部