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 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
Vue学习之常用指令实例详解
Jan 06 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递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
Python中防止sql注入的方法详解
2017/02/25 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
浅析Python数据处理
2018/05/02 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python实现代码统计器
2019/09/19 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
特步官方商城:Xtep
2017/03/21 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
乒乓球兴趣小组活动总结
2014/07/08 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
六一活动主持词
2015/06/30 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫