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 相关文章推荐
js 方法实现返回多个数据的代码
Apr 30 Javascript
JavaScript 基本概念
Jan 20 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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 程式大小
2006/12/06 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python递归计算N!的方法
2015/05/05 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
毕业生找工作推荐信
2013/11/21 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
辞职信格式范文
2015/05/13 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
Vue如何清空对象
2022/03/03 Vue.js