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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
Vue项目服务器部署之子目录部署方法
May 12 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实现的下载css文件中的图片的代码
2010/02/08 PHP
PHP Stream_*系列函数
2010/08/01 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
浅说js变量
2011/05/25 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
茶花女读书笔记
2015/06/29 职场文书
爱国主题班会教案
2015/08/14 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
python 命令行传参方法总结
2021/05/25 Python