JavaScript简单编程实例学习


Posted in Javascript onFebruary 14, 2020

在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签,用户可以在 <script> 标签中直接编写 JavaScript 代码,具体步骤如下。

第 1 步,新建 HTML 文档,保存为 test.html。

第 2 步,在 <head> 标签内插入一个 <script> 标签。

第 3 步,为 <script> 标签设置type="text/javascript"属性。

现代浏览器默认 <script> 标签的脚本类型为 JavaScript,因此可以省略 type 属性;如果考虑到兼容早期版本浏览器,则需要设置 type 属性。

第 4 步,在 <script> 标签内输入 JavaScript 代码:document.write("<h1>Hi,JavaScript!</h1>");

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>第一个JavaScript程序</title>
  <script type="text/javascript">
    document.write("<h1>Hi,JavaScript!</h1>");
  </script>
</head>
<body></body>
</html>

新建 JavaScript 文件

JavaScript 程序不仅可以直接放在 HTML 文档中,也可以放在 JavaScript 文件中。

JavaScript 文件是文本文件,扩展名为.js,使用任何文本编辑器都可以编辑。新建 JavaScript 文件的步骤如下。

第1步,新建文本文件,保存为 test.js。注意,扩展名为.js,它表示该文本文件是 JavaScript 类型的文件。

第2步,打开 test.js 文件,在其中编写如下 JavaScript 代码。

alert("Hi,JavaScript!");

在上面代码中,alert() 表示 Window 对象的方法,调用该方法将弹出一个提示对话框,显示参数字符串 "Hi, JavaScript!"。

第3步,保存 JavaScript 文件。在此建议把 JavaScript 文件和网页文件放在同一个目录下。

JavaScript 文件不能够独立运行,需要导入到网页中,通过浏览器来执行。使用 <script> 标签可以导入 JavaScript 文件。

第4步,新建 HTML 文档,保存为 test.html。

第5步,在 <head> 标签内插入一个 <script> 标签。定义 src 属性,设置属性值为指向外部 JavaScript 文件的 URL 字符串。代码如下:

<script type="text/javascript" src="test.js"></script>

第6步,保存网页文档,在浏览器中会弹出 “Hi,JavaScript!”

定义 src 属性的 <script> 标签不应再包含 JavaScript 代码。

如果嵌入了代码,则只会下载并执行外部 JavaScript 文件,嵌入代码将被忽略。

执行 JavaScript 程序

浏览器在解析 HTML 文档时,将根据文档流从上到下逐行解析和显示。

JavaScript 代码也是 HTML 文档的组成部分,因此 JavaScript 脚本的执行顺序也是根据 <script> 标签的位置来确定的。

示例

使用浏览器测试下面示例,会看到 JavaScript 代码从上到下逐步被解析的过程。

<!DOCTYPE html>
<script>
  alert("顶部脚本");
</script>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script>
    alert("头部脚本");
  </script>
</head>
<body>
  <h1>网页标题</h1>
  <script>
    alert("页面脚本");
  </script>
  <p>正文内容</p>
</body>
<script>
  alert("底部脚本");
</script>
</html>

以上就是本次给大家整理的全部相关知识点,希望能够给大家带来帮助。

Javascript 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
JS实现打砖块游戏
Feb 14 #Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 #Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 #Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 #Javascript
Angular之jwt令牌身份验证的实现
Feb 14 #Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 #Javascript
JS实现简易计算器
Feb 14 #Javascript
You might like
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php array的学习笔记
2012/05/10 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
关于this和self的使用说明
2010/08/01 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
Express的路由详解
2015/12/10 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
Python实现把回车符\r\n转换成\n
2015/04/23 Python
详解Python中dict与set的使用
2015/08/10 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python3 批量扫描端口的例子
2019/07/25 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
社区敬老月活动实施方案
2014/02/17 职场文书
学生检讨书怎么写
2014/10/09 职场文书
股权转让协议范本
2014/12/07 职场文书
质量负责人岗位职责
2015/02/15 职场文书
自荐信怎么写
2015/03/04 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书