这是我参与「第四届青训营」笔记创作活动的的第4天

一、JavaScript基本介绍

1，定义：JavaScript是一门轻量级、弱类型、解释型脚本语言。

轻量级：语法简单、开发轻便、学习容易

弱类型：语法结构不严谨代码编程语法松散

脚本语言：计算机程序语言分类的一种

2，作用

html===页面的结构层

css===页面的样式层

js===页面的行为交互层（人机交互：人为操作==浏览器页面给用户的反馈；数据交互：比如登录注册，根据数据动态生成页面内容。）

3，组成

ECMAScript:JavaScript的基本语法，由欧洲计算机制造商协会制定

DOM（文档对象模型）===利用JavaScript定义的DOM方法可以操作html和css

BOM(浏览器对象模型)===利用JavaScript定义的DOM方法可以操作浏览器

4，基本语法形式

     a)、行内式：直接在html标签中定义JavaScript程序代码（！！！实际项目中不要使用）

a标签的href属性值必须是JavaScript:;

     b)、内部式：在script标签中定义JavaScript程序代码

script标签理论上可以写在任意位置，但是由于计算机程序代码执行顺序问题，所以一般放在body标签内部的最下方。

（补充：所有计算机程序代码默认都是按照文档流/标准流执行：从上至下，从左至右）

     c)、外部式：在外部js文件中定义JavaScript程序代码，再通过<script src=""></script>引入

导入的script标签一般写在body标签内的最下方。

script只要定义了src属性，不管后面是否跟着路径，内部式就会失效；

导入外部js文件同时，就会立即执行外部js文件内容（同级导入 ./文件名）

5，注释

            单行注释      //

            多行注释      /*      */

6，三大调试方式

    （调试不是程序执行的最终目的，只是将变量中存储的数值输出检查）

      a）window.alert(变量/数据)===警告框（JavaScript语法规范规定window可以不写）

      b）document.write(变量/数据)===向页面写入新的内容

      c)  console.log(变量/数据)===向浏览器控制台输出 变量/数据的数值

二、变量

1，定义

存储在内存中的带有名称的数据信息，其中存储的数据信息，在执行过程中是可以改变的。（本质上就是在内存中存储数据的容器）

2，概念

数据不能独立的存储在计算机程序中，必须有专门存储数据的容器，这个容器就称为变量。

3，语法

            var int = 10;

            var===定义变量的关键词，必须要写

            int===变量名称

            【命名规则==必须遵守的：（1）只能是 数字 字母 下划线 $(不推荐使用)（2）严格区分大小写（3）不能使用JavaScript 保留词 关键词   命名规范==建议遵守的：见名知意；小驼峰命名】

            10===表达式，先计算运算表达式的结果 再 赋值给 左侧变量存储

demo部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    //行内式：直接定义在标签内
    //点击出现弹窗
    //<div onclick="window.alert('这是个弹窗效果')">我是一个div</div>
 
 
    //内部式
    //<script>
    //   document.write("今天是8月28日");
    //</script>
 
 
    //外部式
    //<script src="js路径">
    //</script>
 
</body>

这是小编自己写的模拟后端传过来的json字符串的table展示

<%--
  Created by IntelliJ IDEA.
  User: @anther
  Date: 2022/7/27
  Time: 10:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<head>
    <title>table</title>
</head>
<body>
<input type="button" value="查询" id="myButton">
<h1 align="center">员工薪资表</h1>
<hr>
<table border="1px" width=100%>
    <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>薪资</th>
    </tr>
    <tbody id="myTbody">

    </tbody>
</table>
<span id="mySpan">共<span id="count">0</span>条记录</span>

</body>
<script type="text/javascript">
    /*模拟后端传过来的json格式字符串*/
    var data = {
        "emps" : [
            {"number":0o0001,"name":"张三","salary":8000.00},
            {"number":0o0002,"name":"张三","salary":8200.00},
            {"number":0o0003,"name":"张三","salary":8780.00},
            {"number":0o0004,"name":"张三","salary":18000.00},
            {"number":0o0005,"name":"张三","salary":28000.00},
            {"number":0o0006,"name":"张三","salary":82000.00},
            {"number":0o0007,"name":"张三","salary":89000.00},
            {"number":0o0010,"name":"张三","salary":900.00},
            {"number":0o0011,"name":"张三","salary":8000.00},
            {"number":0o0012,"name":"张三","salary":32000.00},
            {"number":0o0013,"name":"张三","salary":22000.00}
        ]
    }
    $(function (){
        $("#myButton").click(function (){
            var html = ""
            for (var i = 0; i < data.emps.length; i++) {
                html += "<tr>"
                html += "<td>"+data.emps[i].number+"</td>"
                html += "<td>"+data.emps[i].name+"</td>"
                html += "<td>"+data.emps[i].salary+"</td>"
                html += "</tr>"
            }
            document.getElementById("myTbody").innerHTML = html
            document.getElementById("count").innerHTML = data.emps.length
        })
    })
</script>
</html>

html入门|青训营

一、JavaScript基本介绍

二、变量