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 相关文章推荐
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
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
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
php图片裁剪函数
2018/10/31 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
Vue自定义指令详解
2017/07/28 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
vue-父子组件和ref实例详解
2019/11/10 Javascript
python制作一个桌面便签软件
2015/08/09 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Django密码系统实现过程详解
2019/07/19 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
档案接收函范文
2014/01/10 职场文书
安全生产检查通报
2014/01/29 职场文书
志愿者活动总结范文
2014/04/26 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
班主任工作总结范文
2015/08/13 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL