学习HTML 第五节.简单交互

也许你和我一样，对页面排版的兴趣小于网页交互，那么我们就先略过一些章节，直接先学一下简单交互。

前面点击图片打开链接的网址，已经是最简单的交互方式了，复杂的方式则需要用到JavaScript编程。

听起来好深奥，能不能学会啊？反正开始是很简单的，我已经会了。

谈到编程学习，第一步当然是老套的在屏幕上显示一行“Hello World”啦。

还是以原来那个HTML文件做底，加上红色的一段：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我要学HTML---简单交互</title>
</head>

<body style="background-color:green;">
<h1 style="text-align: center;color:red">整体背景为绿色
</h1>

<h2 style="background-color:red;">显示一行文字；</h2>
<script>
document.write("Hello! Your fuddy-duddy World!  你好！这个老套的世界！")
</script>

</body>
</html>

显示出来就这样，好象没什么玄妙嘛，跟之前学的有什么不一样？

别急，内涵不一样了。

<script>标签表示后面是JavaScript语句了。

document.write("...")文本书写？语法反正跟之前学的不一样了，晕，又是新概念啊~~~

大概意思是在屏幕上显示如下文字吧，洋人的思维从来没正常过，虽然就是显示一句“Hello world!”，从来都是说打印啊、书写啊什么的，好好说显示不行吗？就象我们要学的JavaScript，只是作者喜欢Java，实际跟Java没什么关系。好吧，无可奈何花落去，似曾相识接着来。

显示一行文字好象没体现出什么交互啊？这么多问题，没关系，慢慢来。

我们下面作个按钮试试，这个有点交互的意思了。

把<body>的内容改成下面一段：

<h1 style="text-align: center;color:red">
我的第一个 JavaScript 按钮
</h1>

<p id="demo">请点按钮
</p>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML='“Hello! Your fuddy-duddy world! 你好！你这个老套的世界！”点一下按钮就显示这一句。'
}
</script>
<noscript>这个程序需要JavaScript，你的浏览器不支持！</noscript>
<button type="button" onclick="myFunction()">请点一下我</button>

打开HTML后显示如下，你看，有个按钮了。

点下按钮后，显示变成这样：

请点按钮那句话变成了“老套的世界”哈！

交互过程挺简单，只是点一下按钮，但代码好象挺复杂!

1.首先在<p>标签中，给“请点按钮”那一段定义一个id，叫：“demo”；

2.然后在<script>中定义一个功能“myFunction()”，这个功能就是将指定id那段，替换显示为最后“老套的世界”那句话。

3.最后在<button>中用onclick属性定义按钮的功能就是调用已定义的“myFunction()”；

4.当然还要给按钮定义两个基本属性：一个是type按钮类型，另一个是按钮显示的文字“请点一下我”。

在按下按钮之前，显示的是

“请点按钮”这句话，和“请点一下我”按钮

按下按钮之后，“请点按钮”这句话被替换为“老套的世界”那句，但按钮的显示没变。

学习HTML 第五节.简单交互 加个按钮的更多相关文章

  1. 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录

    风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...

  2. [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...

  3. [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...

  4. Vue快速学习_第五节

    axios安装及使用 网站文档地址:https://www.kancloud.cn/yunye/axios/234845 1.npm安装 cnpm install axios 2.// 在main.j ...

  5. ELK学习笔记（五）简单搜索和DSL查询

    检索文档 现在我们有一些数据存储在Elasticsearch中,我们可以开始处理这个应用程序的业务需求. 这在Elasticsearch中很容易.我们只需执行HTTP GET请求并指定文档的地址--索 ...

  6. [struts2学习笔记] 第五节 编写struts2的action代码

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40479299 官方文档: http://struts.apache.org/relea ...

  7. HTML学习----------DAY2第五节

    属性为 HTML 元素提供附加信息. HTML 属性 HTML 标签可以拥有属性.属性提供了有关 HTML 元素的更多的信息. 属性总是以名称/值对的形式出现,比如:name="value& ...

  8. Electron学习（三）之简单交互操作

    写在前面 最近一直在做批量测试工具的开发,打包的exe,执行也是一个黑乎乎的dos窗口,真的丑死了,总感觉没个界面,体验不好,所以就想尝试写桌面应用程序. 在技术选型时,Java窗体实现使用JavaF ...

  9. Hibernate学习---第十五节：hibernate二级缓存

    1.二级缓存所需要的 jar 包 这三个 jar 包实在 hibernate 解压缩文件夹的 lib\optional\ehcache 目录下 2.配置 ehcache.xml <ehcache ...

随机推荐

  1. 404 Note Found 队-Alpha 事后诸葛亮

    目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色,管理,合作 总结: 本小组和其他组的评分 分工和贡献分 全组讨论的照片 问题 第一组提问回答:爸爸饿了队 第二组提问回答:拖 ...

  2. java Activiti6 工作流引擎 websocket 即时聊天 SSM源码 支持手机即时通讯聊天

    即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...

  3. (Les16 执行数据库恢复)-重做日志文件恢复

    丢失重做日志文件         丢失了重做日志文件组中的某个成员,并且组中至少还有一个成员:             -不会影响实例的正常操作.             -预警日志中会收到一条信息, ...

  4. 在Red Hat Enterprise Linux 7.3上安装SQL Server 2017

    必要条件: 1.在此快速安装过程中,您需要安装SQL Server 2017或SQL Server 2019上Red Hat Enterprise Linux (RHEL) 7.3 +.然后使用sql ...

  5. 在express中HMR（合并express和webpack-dev-server）

    在学习react的时候,经常用create-react-app来创建web应用,然而写到后面总有连自己服务器和数据库的需求,create-react-app创建的是一个webpack-dev-serv ...

  6. 关于javascript中call()和apply()方法的总结

    前段时间在使用javascript的过程中遇到了继承的问题,自己顺便就对call()和apply()方法进行了了解. 两个方法的共同之处:这两个方法作用相同,都用来改变当前函数调用的对象,即改变thi ...

  7. 实施erp的建议

    纺织行业实施ERP建议 (一)企业各层面应提高对ERP的认识 ERP项目的实施范围横跨企业的每一个部门,在实施过程中需要调动各个部门的资源,这首先需要企业领导者高度重视,从实施的各个环节给予支持:其次 ...

  8. iview中tree的事件运用

    iview中的事件和方法如下: 案例说明: html代码 <Tree :data="data4" @on-check-change="choiceAll" ...

  9. 解决placeholder对ie9及以下的不兼容

    具体的看代码,都写在注释里了,欢迎讨论 <script> $(function () { /* *页面加载立刻执行 *@method:each遍历每个包含placeholder属性的对象( ...

  10. HTML标签速记整理W3C

    标题 <h1>段落<p>链接< href="">图像<img src="">自关闭元素,不需要结束标记换行标志& ...