您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

【JS基础】JavaScript语言简介及简单例子

目录

  • 1 JS简介
  • 2 功能演示:修改标签内容
  • 3 引用外部JS脚本
  • 4 总结
  • 参考文献

1 JS简介

  1. JavaScript 是 web 开发者必学的三种语言之一:
    1. HTML 定义网页的内容;
    2. CSS 规定网页的布局;
    3. JavaScript 对网页行为进行编程。
  2. 标签
    在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。
  3. JavaScript 函数和事件
    JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。例如,当发生事件时调用函数,比如当用户点击按钮时。
  4. JS脚本位置
    JS脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中,或兼而有之。甚至可以放置在文本外部。

2 功能演示:修改标签内容

  1. 可以在网站https://www.w3school.com.cn/tiy/t.asp?f=eg_js_use_body中验证以下代码。
  2. 第5行定义了一个标签,id属性为demo。
  3. 第6行定义了一个按钮,当点击是触发函数myFunction。
  4. 第8~11行定义了一段JS脚本,是一个函数,当函数触发时,修改id为demo的标签内容。
<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</body>
</html>

3 引用外部JS脚本

  1. 可以在网站https://www.w3school.com.cn/tiy/t.asp?f=eg_js_use_external中验证以下代码。
  2. 在代码第8行,引入了外部文件,该文件中已经对myFunction进行定义,其余内容与上一例子类似。
  3. 在外部文件中放置脚本有如下优势:
    1. 分离了 HTML 和代码;
    2. 使 HTML 和 JavaScript 更易于阅读和维护;
    3. 已缓存的 JavaScript 文件可加速页面加载。
<!DOCTYPE html>
<html>
<body>
<h2>外部 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>(myFunction 存储在名为 "myScript.js" 的外部文件中。)</p>
<script src="/demo/myScript.js"></script>
</body>
</html>

4 总结

  1. 了解JS语言与html、css的分工合作。
  2. 简单了解JS语言的使用例子。

参考文献

  1. 《JavaScript 教程》W3school对JS的文本教程。

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进