从零开始：我的JaveWeb学习笔记之动态网页开发：运用JavaScript与JSON学习深入理解脚本语言与数据交换格式（JavaWeb、JavaScript、JSON）

Chase-Hart

于 2024-09-07 15:05:17 发布

阅读量983

点赞数 13

分类专栏：分享心得文章标签：学习笔记 javascript java json

本文链接：https://blog.csdn.net/Hanbuhuic/article/details/141995551

版权

分享心得专栏收录该内容

3 篇文章 0 订阅

订阅专栏

从零开始：我的JaveWeb学习笔记之动态网页开发：运用JavaScript与JSON学习深入理解脚本语言与数据交换格式（JavaWeb、JavaScript、JSON）

JavaWeb简介

avaWeb 是一种使用 Java 语言开发的 Web 应用程序技术。它通常涉及服务器端的 Java 代码，如 Servlets 和 JSP 页面，以及客户端的 HTML、CSS 和 JavaScript。JavaWeb 应用程序可以处理复杂的业务逻辑，并且能够与数据库进行交互。

所以Web开发说白了，就是开发网站的，例如下图所示的网站：淘宝，京东等等

在这里插入图片描述

那么我们知道了web开发是开发网站的，那么我们需要学习哪些知识呢？以及这些知识在我们整个网站开发中占据什么位置呢？对于这些问题，我们就必须知道网站整体的工作流程。

前端web开发：

技术	描述
HTML	用于构建网站的基础结构的
css	用于美化页面的，作用和化妆或者整容作用一样
JavaScript	实现网页和用户的交互
Vue	主要用于将数据填充到html页面上的
Element	主要提供了一些非常美观的组件
Nginx	一款web服务器软件，可以用于部署我们的前端工程

后端web开发：

技术	描述
Maven	一款java中用于管理项目的软件
Mysql	最常用的一款数据库软件之一
SpringBoot	spring家族的产品，当前最为主流的项目开发技术。
Mybatis	用于操作数据库的框架

今天我们来学习JavaScript和JSON

JavaScript引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- 内部脚本 -->
    <!-- <script>
        alert('Hello JS')
     </script> -->
    <!-- 外部脚本 -->
    <script src="demo.js"></script>
    <!-- script标签不能自闭和 -->

</head>

<body>


</body>

</html>

JavaScript使得网页可变得交互，下面一个网页的弹窗就是利用JavaScript实现的
在这里插入图片描述

JavaScript简介

JavaScript（简称JS）是一门跨平台、面向对象的脚本语言，用于控制网页行为，使网页变得可交互。它与Java虽然名称相似，但它们是完全不同的语言，只是基础语法有些类似。JavaScript由Brendan Eich在1995年发明，并在1997年成为ECMA标准。ECMAScript 6（ES6）是最新的JavaScript版本，发布于2015年。
请添加图片描述

JavaScript的用途与好处

用途

网页交互：JavaScript能够响应用户操作，如点击、滚动、输入等。
AJAX：异步数据交换，无需重新加载页面即可更新网页部分内容。
前端框架：如React、Angular、Vue.js等，它们使用JavaScript构建复杂的用户界面。

好处

跨平台：JavaScript可以在任何支持它的浏览器上运行。
易于学习：JavaScript的语法相对简单，易于上手。
社区支持：拥有庞大的开发者社区和丰富的资源。

如何学习JavaScript

基础语法：学习变量声明、数据类型、运算符、控制结构等。
DOM操作：学习如何通过JavaScript操作HTML DOM。
事件处理：学习如何处理用户事件，如点击、输入等。
框架学习：学习流行的JavaScript框架，如React或Vue.js。

JavaScript常用标签与语法

常用标签

<script>：用于嵌入或引用JavaScript代码。
window.alert()：弹出警告框。
document.write()：写入HTML输出。
console.log()：写入浏览器控制台。

常用语法

区分大小写：变量名、函数名等都是区分大小写的。
分号：每行结尾的分号可有可无。
注释：
- 单行注释：//注释内容
- 多行注释：/*注释内容*/

变量

声明：使用var关键字声明变量。
命名规则：
- 可以包含字母、数字、下划线(_)或美元符号($)。
- 数字不能开头。
- 建议使用驼峰命名。

请添加图片描述

数据类型

原始类型：
- number：数字（整数、小数、NaN）
- string：字符串，单双引号皆可。
- boolean：布尔值（true, false）。
- null：对象为空。
- undefined：未初始化的变量默认值。

String

创建方式：
- var str = new String("Hello String");
- var str = "Hello String";
属性和方法：

属性/方法	描述
`length`	字符串的长度
`charAt()`	返回指定位置的字符
`indexOf()`	检索字符串
`trim()`	去除字符串两边的空格
`substring()`	提取字符串中两个指定索引号之间的字符

请添加图片描述

数组

定义：
- var arr = new Array(元素列表);
- var arr = [元素列表];
访问：
- arr[索引] = 值;
属性和方法：

属性/方法	描述
`length`	设置或返回数组中元素的数量
`forEach()`	遍历数组中的每个有值的元素，并调用一次传入的函数
`push()`	将新元素添加到数组的末尾，并返回新的长度
`splice()`	从数组中删除元素

请添加图片描述

自定义对象

定义格式：

```javascript
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表) {
// 函数体
}
};


- **示例**：

```javascript
var user = {
  name: "Tom",
  age: 20,
  gender: "male",
  eat: function() {
    alert("用膳~");
  }
};

// 调用
console.log(user.name);
user.eat();

请添加图片描述

运算符

算术运算符：+, -, *, /, %, ++, --
赋值运算符：=, +=, -=, *=, /=, %=
比较运算符：>, <, >=, <=, !=, ==, ===
逻辑运算符：&&, ||, !
三元运算符：条件表达式 ? true_value : false_value

请添加图片描述

JSON简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

JSON用途与好处

用途

数据交换：作为前后端数据交换的标准格式。
配置文件：用于存储配置信息，如Web应用的设置。

好处

简洁：相比于XML，JSON更加简洁。
易于解析：大多数编程语言都提供了解析JSON的工具。
与JavaScript的兼容性：可以直接被JavaScript解析和生成。

如何学习JSON

基础语法：学习JSON的结构和语法。
解析与生成：学习如何在不同编程语言中解析和生成JSON。
API交互：学习如何使用JSON与Web API进行交互。

JSON常用标签与语法

基础语法

定义：var 变量名 = '{"key1": value1, "key2": value2}';

示例

```json
var userStr = ‘{“name”: “Jerry”, “age”: 18, “addr”: [“北京”, “上海”, “西安”]}’;

![请添加图片描述](https://i-blog.csdnimg.cn/direct/88d31fe01b324b158667e201e3a6e8d0.png)

### 转换

- **JSON字符串转为JS对象**：

```javascript
var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串：

var jsonStr = JSON.stringify(jsObject);

数据类型

支持的数据类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true或false）
- 数组（在方括号中）
- 对象（在花括号中）
- null

DOM简介

DOM（Document Object Model）是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为三个不同的部分：

请添加图片描述

Core DOM

标准模型：适用于所有文档类型。
- Document：整个文档对象。
- Element：元素对象。
- Attribute：属性对象。
- Text：文本对象。
- Comment：注释对象。

请添加图片描述

HTML DOM

HTML文档的标准模型：
- Image：<img>
- Button：<input type='button'>

请添加图片描述

操作DOM

请添加图片描述

Document对象

获取Element对象：
1. 根据id属性值：返回单个Element对象。
```
var h1 = document.getElementById('h1');
```
1. 根据标签名称：返回Element对象数组。
```
var divs = document.getElementsByTagName('div');
```
1. 根据name属性值：返回Element对象数组。
```
var hobbys = document.getElementsByName('hobby');
```
1. 根据class属性值：返回Element对象数组。
```
var clss = document.getElementsByClassName('cls');
```

Window对象

介绍：浏览器窗口对象。
获取：直接使用window，其中window.可以省略。
```
window.alert("Hello Window");
alert("Hello Window");
```
属性：
- history：对History对象的只读引用。
- location：用于窗口或框架的Location对象。
- navigator：对Navigator对象的只读引用。
方法：
- alert()：显示带有一段消息和一个确认按钮的警告框。
- confirm()：显示带有一段消息以及

案例

事件绑定

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>

<body onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>

<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>
</html>

在这里插入图片描述
以edge为例，这些JavaScript函数是否生效，打开网页的开发者模式就能查看到，或者按下F12查看控制台
请添加图片描述

事件案例

请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>

<body>

    <img id="light" src="../img/off.gif"> <br>

    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    //需要用到的事件，onclick
    function on() {
        //1获取img元素对象
        var img = document.getElementById("light");

        //2.设置src属性
        img.src = "../img/on.gif"
    }
    function off() {
        //1获取img元素对象
        var img = document.getElementById("light");

        //2.设置src属性
        img.src = "../img/off.gif"
    }



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 

    //需要用到的事件：onfocus,onblur
    function lower() {
        //1.获取输入框元素对象
        var input = document.getElementById("name");

        //2.将值转为小写
        input.value = input.value.toLowerCase();
    }

    function upper() {
        //1.获取输入框元素对象
        var input = document.getElementById("name");

        //2.将值转为小写
        input.value = input.value.toUpperCase();

    }


    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll() {
        //获取所有的复选框的元素对象
        var hobbys = document.getElementsByName("hobby");

        //设置选中对象
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }

    }

    function reverse() {
        //获取所有的复选框的元素对象
        var hobbys = document.getElementsByName("hobby");

        //设置选中对象
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = false;
        }
    }


</script>

</html>

在这里插入图片描述

题外话

你有没有想过，如果编程语言也有“方言”，那会怎样？想象一下，当你尝试在不同的编程环境中运行你的代码，就像在不同的国家旅行一样，你可能会听到各种口音和方言。

Java 可能会有一种标准的“牛津英语”口音，严谨而正统，每个类和对象都遵循着严格的语法和礼仪。
JavaScript 则可能像纽约的快节奏口音，充满了活力和即兴的表达，它在浏览器的大街小巷中快速穿梭，处理着各种事件和交互。
Python 可能会有一种温和的“澳大利亚口音”，以其简洁明了的语法和易于理解的结构而闻名，让人感到轻松自在。
C++ 则可能带有一丝“德国工程”的精确和严谨，每个类和函数都像是精心设计的机械部件，精确无误。
当你学习一门新的编程语言时，就像是在学习一种新的方言。一开始可能会有些困难，但随着时间的推移，你开始掌握它的语调和节奏。最终，你不仅能流利地“说”这门语言，还能理解它的文化和背景。

编程语言的多样性和它们各自的“方言”是软件开发世界中的一大乐趣。它们不仅让我们的工作更加有趣，还让我们能够以不同的方式思考问题和解决方案。

Chase-Hart

关注

13
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
从零开始：我的JaveWeb学习笔记之动态网页开发：运用JavaScript与JSON学习深入理解脚本语言与数据交换格式（JavaWeb、JavaScript、JSON）

本文是作者关于JavaScript和JSON学习的个人笔记，旨在为初学者提供一个从基础到进阶的学习路径。文章首先介绍了JavaScript的基本概念，包括它的发展历程、与Java的区别、以及它在现代网页设计中的重要性。接着，文章深入探讨了JavaScript的基础语法、数据类型、变量声明、运算符、数组和对象等核心概念，以及如何通过DOM操作来控制网页元素。文章的后半部分转向JSON的学习，解释了JSON的基础知识、数据结构和在数据交换中的应用。
复制链接

扫一扫