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设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vue+iview实现文件上传
Nov 17 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python实现智能语音天气预报
2019/12/02 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
指针和引用有什么区别
2013/01/13 面试题
应届毕业生应聘自荐信范文
2014/02/26 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
共产党员承诺书
2014/03/25 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
李强感恩观后感
2015/06/17 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书