《JavaScript和jQuery实战手册(原书第2版)》——1.4节把文本写到Web页面上

简介: 本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第1章,第1.4节把文本写到Web页面上,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看

1.4 把文本写到Web页面上
前一个脚本在显示器的中间弹出一个对话框。如果想要使用JavaScript直接在Web页面上显示消息,该怎么办呢?有很多方法可以做到这一点,并且我们将在本书后面内容中学习一些高级技术。然而,我们可以使用一条内置JavaScript命令来实现这个简单的目标,这就是第二个脚本所要做的事情:

  1. 在文本编辑器中打开hello2.html文件。
    尽管< script>标签通常出现在Web页面的< head>中,但是可以把它们和JavaScript程序直接放置到Web页面的正文中。
  2. 直接在“< h1>Writing to the document window”的下面输入如下代码:
< script>
    document.write('<p>Hello world!</p>');
    < /script>

和alert()函数一样,document.write()也是一条JavaScript命令,它把放置在开始圆括号和结束圆括号之间的内容直接显示出来。在这个例子中,HTML

Hello world!

添加到了页面中,这是一个段落标签和两个单词。
  1. 保存页面,并且在一个Web浏览器中打开它。
    页面打开并且单词“Hello world!”出现在蓝色标题栏的下方(如图1-3所示)。


87e0ebfd15f43ff5cc513e87cac406d545882e24

注意: 下载的教程文件也包含了每个教程的完整版本。如果你的JavaScript无法工作,则将你的成果和同一目录下文件名以complete_开头的教程文件进行比较。例如,文件complete_hello2.html包含了我们添加到文件hello2.html的脚本的一个有效版本。
刚刚创建的两段脚本可能并没有使你对JavaScript或者本书留下深刻印象。不必担心。从完全理解基础知识开始是很重要的。只需要几章内容,你将能够使用JavaScript做一些非常有用且复杂的事情。实际上,在本章剩下的内容中,我们将初步尝试一些高级功能,在学习完本书的前两个部分之后,我们就能够把这些高级功能添加到Web页面。

相关文章
|
9月前
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
477 28
|
9月前
|
人工智能
WEB CAD 利用AI编程实现多行文本的二次开发
本文介绍了在MxCAD插件中实现自定义编辑器实体类的功能,重点展示如何通过MxCADMText类在CAD中渲染和管理富文本。文章详细说明了注册同心圆实体文本的步骤,包括实现自定义文本类、注册自定义文本以及交互式修改参数的方法。此外,还扩展实践了粗糙度实体文本的注册与应用,涵盖构造粗糙度自定义实体文本类、注册及初始化过程,并通过示例图展示了运行效果。这些功能可帮助用户将复杂图形以文本形式插入多行文本中,提升项目设计效率。
|
9月前
|
移动开发 前端开发 JavaScript
H5 页面与 Web 页面的制作方法
H5页面制作利用HTML5、CSS3和JavaScript技术,结合H5编辑器或框架(如Adobe Dreamweaver、Ionic),注重移动设备兼容性与响应式布局。Web页面制作则基于传统HTML、CSS和JavaScript,借助文本编辑器或IDE完成开发。两者区别在于技术版本、交互性和浏览器支持:H5更互动、现代,但可能不兼容旧浏览器;Web页面更静态、兼容性广。根据需求选择:高交互选H5,广泛兼容选Web。
1316 6
|
10月前
|
前端开发 JavaScript API
给Web开发者的HarmonyOS指南01-文本样式
本系列教程适合 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。
339 5
给Web开发者的HarmonyOS指南01-文本样式
|
10月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
11月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
325 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
361 14
|
人工智能 搜索推荐 API
用于企业AI搜索的Bocha Web Search API,给LLM提供联网搜索能力和长文本上下文
博查Web Search API是由博查提供的企业级互联网网页搜索API接口,允许开发者通过编程访问博查搜索引擎的搜索结果和相关信息,实现在应用程序或网站中集成搜索功能。该API支持近亿级网页内容搜索,适用于各类AI应用、RAG应用和AI Agent智能体的开发,解决数据安全、价格高昂和内容合规等问题。通过注册博查开发者账户、获取API KEY并调用API,开发者可以轻松集成搜索功能。
|
JavaScript 前端开发 API
深入了解jQuery:简化Web开发的强大工具
【10月更文挑战第11天】深入了解jQuery:简化Web开发的强大工具
136 0
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
184 0