前端知识总结（6）：JS是如何实现人机交互的

最新推荐文章于 2023-07-08 18:57:57 发布
最新推荐文章于 2023-07-08 18:57:57 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42317011/article/details/104361049
版权
前端 专栏收录该内容
10 篇文章 0 订阅 ¥39.90 ¥99.00
订阅专栏
本文总结了JS如何实现人机交互，主要通过控制HTML的DOM元素和CSS。JS控制HTML实质是操作DOM节点，包括查找、创建、修改和删除等操作。同时，JS可以设置元素的样式，包括直接修改style属性、使用setProperty方法、修改cssText以及通过class和创建style/link标签来控制CSS。接下来的文章将深入探讨JS的基本语法。
摘要由CSDN通过智能技术生成

上一篇：前端知识总结（5）：head标签详解

​ 由于一两篇文章很难将JS基础总结完，为了管理，再给个标题吧

JS基础总结（1）：JS是如何实现人机交互的

​ 在html、css、js之间的联系 提到对html进行逻辑上的装饰，使人机交互变为可能 ，但是具体来说JS是以什么方式来实现的呢？

JS控制HTML

​ 往深来说js控制html，就是在控制DOM元素。额，DOM元素是啥？

---------------------- 开个小差 ------------------

在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :

  • 文档本身就是一个文档对象

  • 所有 HTML 元素都是元素节点

  • 所有 HTML 属性都是属性节点

  • <
了解本专栏 订阅专栏 解锁全文
堂铭
关注
专栏目录
订阅专栏
前端知识总结（7）：JS基本语法之变量声明
qq_42317011的博客
02-17 472
上一篇：前端知识总结（6）：JS是如何实现人机交互的 ​ 由于一两篇文章很难将JS基础总结完，为了管理，再给个标题吧，上篇文章竟然说还只剩细枝末节，呸，真是暴徒口出狂言，尽说一些"只要列一些Goolge/百度 关键词就可" 憨话，这让JS基本语法往哪撂，好吧????，我错了，这就来总结一下您~~ JS基础总结（2）：JS基本语法之变量声明 ​ JavaScript 是一个脚本语言，它是一个轻量级，但功能...
手机中的那些人机交互都是怎么实现的
JianwenL的博客
07-13 1542
手机人机交互原理详解
JavaScript人机交互
AlbertYang的博客
11-25 5710
文章目录导航0. 轮播图自动播放需求:技术分析:步骤分析:1. 完成页面定时弹出广告1.1 需求分析1.2 技术分析1.3 步骤分析1.4 代码实现1.5扩展2. 完成完成表单的校验2.1 需求分析2.2 技术分析2.3 步骤分析2.4 代码实现3.表格隔行换色3.1 需求分析3.2 技术分析3.3 步骤分析3.4 代码实现4. 复选框的全选和全不选4.1 需求分析4.2 技术分析4.3 步骤分析...
没学js，如何实现js交互
sghu8023的博客
06-11 367
学习前端的小白们都知道，一个网页的三大要素 html（结构） css（样式） javascript（行为） 其中HTML就是一个网页的骨架，而css就是其中的外皮，javascript就是它能做到的和用户的交互。 其中javascript可以渲染html，可以修改css样式。 html今天要翻身做主人了 视频较大我们直接来看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <
人机交互Leap Motion结合p5.js创意编程
Ayanami_Rei_的博客
04-10 779
Leap Motion 结合p5.js创意编程结果分析设计思路具体流程绘制 星空图案，流星效果，星空闪烁效果。绘制 飞船和卫星。实现 加速度模拟，随机抖动，卫星的类似双星运动。绘制 彗星。实现了粒子效果的彗星运动，模拟尾迹效果.主程序 和实现音乐播放器 结果分析 利用leap motion 手部检测 完成了对星空闪烁，彗星运动，飞船加速度运动，随机柏林噪声抖动以及粒子效果的模拟。 艺工交叉，完成了创意编程。 设计思路 宇宙的浩瀚无边，彗星的神秘诡变一直等待着人类去探索 最广为人知的哈雷彗星需要76年回归一次
人机交互第四次实验课——JavaScript+网站布局
weixin_34378045的博客
11-23 142
北京联合大学 首页 师资队伍 学院分布 校园风光 招生计划 内容——JavaScript学习部分 <html><head><title>LUOyu</title><style type="text/css">#x1 { background:yellow;}</style> ...
山东大学软件学院人机交互实验源码及报告
12-22
在这个主题下，"山东大学软件学院人机交互实验源码及报告"包含的资料可能是学生在该课程中完成的实践项目，通过编程实现特定的人机交互功能，并撰写详细的实验报告以分析和总结学习成果。 实验源码通常涉及以下知识...
人机交互项目
02-14
总结来说，JavaScript在人机交互项目中扮演了核心角色，通过其动态特性、丰富的库和框架，以及对DOM的灵活操作，使得项目能够实现高度互动和个性化的用户体验。理解并熟练运用这些知识点，对于构建高效、易用的人机...
前端部分知识点总结
m0_61679135的博客
11-07 1595
目录 一、HTML、CSS阶段 1.盒子模型的组成部分 2.定位相关 3.浮动相关 4.精灵图 5.标签的显示模式 6.margin塌陷现象 7.如何使一个盒子水平垂直居中？ 8.如何垂直居中一个img？ 9.如何实现双飞翼（圣杯）布局？ 10.css中选择器的优先级以及css权重如何计算 11.H5新增的语义化标签和特性 12.C3新增的特性 13.css中link和@import的区别 二、移动web阶段 1.什么是移动端的视口？ 2.为...
人机交互JavaScript框架Cycle.js.zip
07-18
Cycle.js 是一个人机交互的 JavaScript 框架。Cycle 的核心是由 human() 和 computer () 两个函数相互作用而建立的模型。计算机的输出作为人体的输入，反之亦然，然后导出方程 x = human(computer(x))，这个 x 是可以观察的。人机相互观察，这就是我们说的“功能单项数据流”，或者“反应对话”，作为一个应用程序的开发者，你只要指定 computer() 的功能。示例代码：import {run} from '@cycle/core';  import {h, makeDOMDriver} from '@cycle/web';  function main(responses)  {    return {      DOM: responses.DOM.get('.field', 'input')        .map(ev => ev.target.value)        .startWith('')        .map(name =>          h('div', [            h('label.label', 'Name:'),            h('input.field', {attributes: {type: 'text'}}),            h('hr'),            h('h1.header', 'Hello '   name)                     ])     )   }; }  run(main,  {   DOM: makeDOMDriver('.js-container')  } ); 标签：Cycle
人机交互大作业——Web系统
05-23
一个经过改版的JavaScript_dom编程艺术第12章的内容，更改了文字内容，标题图片以及导航内容。
人机交互如何改变人类生活 | 公开课笔记
CSDN人工智能头条
07-09 2643
作者 | 翁嘉颀编译 | 姗姗出品 | 人工智能头条（公众号ID：AI_Thinker）【导读】在人机交互过程中，人通过和计算机系统进行信息交换，信息可以是语音、文本、图...
使用极验【行为验证】实现人机交互验证
一枚不断学习的小码农一枚~
06-12 1609
官网：https://docs.geetest.com/sensebot/apirefer/api/web 流程与原理 待补充…… 方法 1.引入极验js，调用初始化方法 require("~/plugins/geetest.js"); this.handleGtInit(); 2.先和服务端进行一次验证，验证后返回相关信息，带着相关信息进行二次验证 handleGtInit(status) { let _this = this; this.gtLoadStatus = true;
javaScript与用户的交互方式
最新发布
qq_41038797的博客
07-08 1186
alert()函数用于显示一条消息，confirm()函数用于显示一个确认框，用户可以选择"确定"或"取消"，而prompt()函数则显示一个提示框，用户可以输入文本。这只是 JavaScript 与用户交互的一些基本方法，实际上，还有许多其他的技术和库可以实现更复杂的用户交互体验，如使用框架（如React、Angular、Vue.js）或库（如jQuery）来简化交互操作。综上所述，直接与用户交互和通过DOM交互都是为了实现网页与用户的交互，但在交互方式、功能扩展、灵活性和代码复杂性等方面存在一些区别。
【人机交互技术】Web界面设计
欢迎来到关关雎鸠儿的博客
07-15 8467
一、实验目的和要求 1）熟悉 Web 站点的信息交互模型和结构 2）熟悉 Web 界面设计的基本思想和原则 3）掌握 Web 界面设计的工具和技术 二、实验内容与步骤 1）实验内容: 要求根据 Web 界面设计的原则(简洁、一致性、对比度)，进行 Web 界面规划、 概要设计和设计要素的选择，利用一种界面设计工具(Axure/HTML5/Dreamweaver / Frontpage)完成网页设计...
JS 常见知识点(数据交互)
weixin_55042716的博客
03-30 1805
三 数据交互 get post区别 get 从服务器上获取数据。post 是向服务器传送数据。 GET把参数包含在URL中，POST通过request body传递参数。 GET在浏览器回退时是无害的，而POST会再次提交请求。 GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。 GET请求在URL中传送的参数是有长度限制的，而POST没有。 GET比POST更不安全，因为参数直接暴露在URL上。 补充：GET，POST请求过程有些不同： GET请求，浏览器会把http
JS 基础交互（交互三部曲）
qq_44748497的博客
11-06 1061
交互三步曲：找到对应的标签，添加事件，事件发生时的反馈 获取标签 通过id获取 语法：document.getElementById("id名")：获取到的是一个唯一标签 //1.通过id获取元素 var oSs = document.getElementById("ss"); //2.添加事件 标签.onclick = function(){ 事件发生时要执行的操作 } oSs.onclick = function(){ alert("easy"); } 通..
人机交互必会18问
weixin_45606831的博客
07-06 5734
1、简述什么是人机交互？ 传统的人机交互（Human Computer Interaction，HCI）是研究运用什么样的开发原理及方法，让人们可以方便地使用计算机系统的学科。 人机交互是指用户与计算机相互之间的通信。实现人与计算机之间通信的硬、软件系统即为交互系统。这里的“交互”即信息交换，包括计算机通过输出或显示设备给人提供信息，以及人通过输入设备向计算机传达有关信息。 2、简述人机交互的发展历史经历了哪些阶段？各阶段的基本特点是什么？ 命令行界面交互阶段、图形用户界面交互阶段、自然和谐的人机交互阶段（
前端弹窗js实现：Ajax无跳转交互技术解析
"这篇文章主要介绍了如何使用JavaScript实现前端弹出对话框，并结合Ajax进行数据交互。作者通过在页面上添加蒙板，以阻止用户在弹窗出现时与背景页面的互动，然后在蒙板之上创建一个绝对定位的弹窗。弹窗内部的数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值