【JS基础-1】JavaScript语言简单介绍（语法、变量、数组、流程控制语句、函数、对象和事件）

List item

1 JS概述

（1）JavaScript（官方名称为ECMAScript）是 web 开发者必学的三种语言之一：

HTML 定义网页的内容；
CSS 规定网页的布局；
JavaScript 对网页行为进行编程。

（2）作用：在浏览器上实现一些动态的效果.说明JS的运行环境是浏览器。
（3）标签：在 HTML 中，JavaScript 代码必须位于 <script> </script> 标签之间。

（4）JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。例如，当发生事件时调用函数，比如当用户点击按钮时。

（5）JS脚本位置
与HTML混编，且JS脚本可被放置与 HTML 页面的任何位置，如 <body> 、 <head> 部分中，或兼而有之。甚至可以放置在文本外部。

（6）JS语法
JS的语法和java语言类似，每个语句以[；]结束，语句块用{…}。但是Javascript并不强制要求在每个语句的结尾加分号[；]，浏览器中负责执行Javascript并代码的引擎会自动在每个语句的结尾补上[；]。

（7）JS输出语句：

alert()；弹窗
confirm();弹窗
prompt();弹窗
console.log；在控制台输出。

在这里插入图片描述

tips:
DOM:document object model，文档对象模型。

2 在HTML中引入JS代码

2.1 内部引用

在 HTML 中，JavaScript 代码必须位于 <script> </script> 标签之间。代码如下，其中JS代码可以位于HTML页面的任意位置，

<html>
    <head>
        <title>JS代码测试</title>
        <meta charset="utf-8">
        <script>
            //正式进入JS代码
            alert("This is my first web");
        </script>
    </head>
    <body>

    </body>
</html>
<script>alert("hello,word!")</script>

上述代码运行结果如下：
在这里插入图片描述
点确定后，又弹出下一条个框。

2.2 外部引用

（1）html代码文件名为test_out.html，具体代码如下：

<html>
    <head>
        <title>JS代码测试</title>
        <meta charset="utf-8">
        <script src="./js/test.js"></script><!--js的引用采用相对路径-->
    </head>
    <body>

    </body>
</html>

当采用绝对路径引用js脚本时

   <script src="http://172.16.1.1/JS/js/test.js"></script><!--js的引用采用绝对路径-->

（2）js代码文件名为test.js，具体代码如下。注意，当通过浏览器直接访问js代码文件时，只能返回纯文本内容，而不能执行该脚本。这是由于js脚本中没有定义<script></script>标签。

alert("This is from test.js");

2.3 功能演示：修改标签内容

2.3.1 内部引用

可以在网站https://www.w3school.com.cn/tiy/t.asp?f=eg_js_use_body中验证以下代码。
第5行定义了一个标签，id属性为demo。
第6行定义了一个按钮，当点击是触发函数myFunction。
第8~11行定义了一段JS脚本，是一个函数，当函数触发时，修改id为demo的标签内容。

<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript<