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 相关文章推荐
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 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 读取shell管道传输过来的内容
2010/03/01 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
php异常处理捕获错误整理
2019/09/23 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
javascript arguments使用示例
2014/12/16 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python数字图像处理之高级形态学处理
2018/04/27 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
flask框架中的cookie和session使用
2021/01/31 Python
教育实习生的自我评价分享
2013/11/21 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
升职感谢信
2015/01/22 职场文书
工作检讨书范文
2015/01/23 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书