从零开始:我的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对象:
- 根据id属性值:返回单个Element对象。
var h1 = document.getElementById('h1');
- 根据标签名称:返回Element对象数组。
var divs = document.getElementsByTagName('div');
- 根据name属性值:返回Element对象数组。
var hobbys = document.getElementsByName('hobby');
- 根据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++ 则可能带有一丝“德国工程”的精确和严谨,每个类和函数都像是精心设计的机械部件,精确无误。
当你学习一门新的编程语言时,就像是在学习一种新的方言。一开始可能会有些困难,但随着时间的推移,你开始掌握它的语调和节奏。最终,你不仅能流利地“说”这门语言,还能理解它的文化和背景。
编程语言的多样性和它们各自的“方言”是软件开发世界中的一大乐趣。它们不仅让我们的工作更加有趣,还让我们能够以不同的方式思考问题和解决方案。