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 10件让人费解的事情
Feb 15 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
vue 实现单选框设置默认选中值
Nov 07 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Linux下python制作名片示例
2018/07/20 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
美术课外活动总结
2014/07/08 职场文书
工程主管竞聘书
2015/09/15 职场文书