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的each里用return true或false代替break或continue
May 21 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
RequireJS用法简单示例
Aug 20 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
浅谈Python中的数据类型
2015/05/05 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
详解Django框架中的视图级缓存
2015/07/23 Python
Python3 中文文件读写方法
2018/01/23 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python实现多层感知器
2019/01/18 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
2014植树节活动总结
2014/03/11 职场文书
2014年计生标语
2014/06/23 职场文书
英语课外活动总结
2014/08/27 职场文书
元宵节晚会主持词
2015/07/01 职场文书
大学生党课感想
2015/08/11 职场文书