JavaWeb系列三: JavaScript学习 上
JavaWeb系列三: JavaScript学习 上
·
JavaScript-跟着韩顺平老师学Java
⬅️ 上一篇: JavaWeb系列二: CSS
🎉 欢迎来到 JavaWeb系列三: JavaScript学习 上 🎉
在本篇文章中，我们将带您初步了解和入门 JavaScript。JavaScript 是一种轻量级的、解释型的编程语言，广泛应用于网页开发中。通过学习 JavaScript，您可以实现网页的动态效果和交互功能。
🔧 本篇需要用到的项目: javascript-demo项目
官方文档
地址: https://www.w3school.com.cn/js/index.asp
离线文档: W3School离线手册(2017.03.11版)
基本说明
1.JavaScript 能改变 HTML 内容, 能改变 HTML 属性, 能改变 HTML 样式(CSS), 能完成页面的数据验证.
演示: D:\idea_project\zzw_javaweb\zzw_javascript\js演示_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>JavaScript 能做什么？</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='./img/eg_bulbon.gif'"> 开 灯
</button>
<img id="myImage" border="0" src="../img/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='./img/eg_bulboff.gif'"> 关 灯
</button>
</body>
</html>
2.JS 需要运行浏览器来解析执行 JavaScript 代码.
3.JS 是 Netscape 网景公司的产品, 最早取名为 LiveScript, 后更名为 JavaScript. 和 Java 没有关系.
4.JavaScript 简写 JS.
JavaScript特点
1.JavaScript 是一种解释型的脚本语言, C,C++ 等语言先编译后执行, 而 JavaScript 是在程序的运行过程中逐行进行解释.
2.JavaScript 是一种基于对象的脚本语言, 可以创建对象, 也能使用现有的对象(有对象).
3.JavaScript是弱类型的, 对变量的数据类型不做严格的要求, 变量的数据类型在运行过程中可以变化.
创建js弱类型.html
<head>
<meta charset="UTF-8">
<title>JavaScript是弱类型的</title>
<!--
1.js代码可以写在script标签中
2.type="text/javascript" 表示这个脚本(script)类型是javascript
3.type="text/javascript" 可以不写,建议写上
4.js语句后可以不写 ; 建议写上
5.var
-->
<script type="text/javascript">
//弱类型
var name = "你好,世界";
//输出, alert() 使用弹框方式
//输出, console.log() 在调试位置输出
alert("name=" + name);
//输出变量的类型typeof, 输出变量的类型
alert(typeof name);
//name = 100;//给name重新赋值
//alert(typeof name);//这里因为浏览器缓存的原因,仍然输出String
var age = 10;//数值
console.log("age=" + age);
console.log(typeof age);
age = "赵志伟";
console.log("age=" + age);
console.log(typeof age);
//如果输出字符串+数字,会把数字换成String吗
var n = 123 + "zzw";
console.log(n);
console.log(typeof n);//String
</script>
</head>
4.跨平台性 (只要是可以解释 JS 的浏览器都可以执行, 和平台无关)
JavaScript快速入门
使用方式1:Script标签写JS代码
1.应用实例 . 新建 1.js.use.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script标签中写JS代码</title>
<!--
解读
1.可以在head和body内嵌入script
2.执行顺序: 从上到下
3.建议放在head
4.是text/javascript 不是javascript
-->
<script type="text/javascript">
//在head标签内使用script写js代码
alert("ok");
console.log("ok");
</script>
</head>
<body>
<script type="text/javascript">
//在body内使用script写js代码
console.log("hi");
</script>
</body>
</html>
使用方式2:使用script标签引入JS文件
应用实例
1.创建 js/test.js
2.创建 2.js-use.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用script标签引入JS文件</title>
<script src="js/test.js"></script>
</head>
<body>
</body>
</html>
3.测试
两种方式，不能混用
应用实例
1.新建js-use-detail.html，看使用细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两种使用js的方式,二选一,不能混用</title>
<!--
如果你两种方式都使用了
1.不会报错
2.但是只有一个生效, 前面引入的js生效
-->
<script type="text/javascript" src="js/test.js">
alert("hi 你好");//这里不会生效. 如果想再次使用, 再写一段 script 即可
</script>
<script type="text/javascript">
alert("hi 你好 ~这里能正常弹出");
</script>
</head>
<body>
</body>
</html>
查看js报错信息!!!
执行js，chrome浏览器如何查看错误信息
右上角三个点 -> 更多工具 -> 开发者工具 -> 控制台(console)
创建error.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>怎么看错误提示</title>
<script type="text/javascript">
//在浏览器ctrl+shift+i 进入到调试器
console1.log("hi");
console1.log("hi");
console1.log("hi");
console1.log("hi");
console1.log("hi");
console1.log("hi");
</script>
</head>
<body>
</body>
</html>
执行js, ff 浏览器如何查看错误信息
右上角 -> 更多工具 ->Web 开发者工具 -> 控制台
JavaScript变量
JavaScript变量表示存储数据的容器
应用实例
创建simple_var.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量举例</title>
<script type="text/javascript">
//js语言非常的松散, 没有强制的约束
var age = 23;
console.log(typeof age);//number
age = "abc";
console.log(typeof age);//string
age = 'a';//js中没有char类型, 归属于string类型
console.log(typeof age);//string
age = 1.1;
console.log(typeof age);//number
age = true;
console.log(typeof age);//boolean
age = function () {
}
console.log(typeof age);//function
age = null;
console.log(typeof age);//object
age = undefined;
console.log(typeof age);//undefined
age = [1, 2, 3];
console.log(typeof age);//object
age = {name: 'zzw', age: 25};
console.log(typeof age);//object
</script>
</head>
<body>
</body>
</html>
变量定义格式
创建var_define.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量举例</title>
<script type="text/javascript">
//js语言非常的松散, 没有强制的约束
var age = 23;
console.log(typeof age);//number
age = "abc";
console.log(typeof age);//string
age = 'a';//js中没有char类型, 归属于string类型
console.log(typeof age);//string
age = 1.1;
console.log(typeof age);//number
age = true;
console.log(typeof age);//boolean
age = function () {
}
console.log(typeof age);//function
age = null;
console.log(typeof age);//object
age = undefined;
console.log(typeof age);//undefined
age = [1, 2, 3];
console.log(typeof age);//object
age = {name: 'zzw', age: 25};
console.log(typeof age);//object
</script>
</head>
<body>
</body>
</html>
js正则表达式
格式: /^ 正则表达式主体 $/ 修饰符(可选)
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配 |
| g | 执行全局匹配 |
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
//正则表达式验证用户名
var usernamePattern = /^\w{6,10}$/;
if (!usernamePattern.test(usernameValue)) {
$("span[class='errorMsg']").text("用户名格式不对, 需要6-10个字符(大小写字母,数字,下划线)");
return false;
}
var content = "/views/manage/furn_add.jsp";
/^\/views\/manage\/.*/.test(content);
var regExp = new RegExp("^\/views\/manage\/.*");
regExp.test(content);
参考👉
1.split()
var str = "1a2b3c4d5e6f7g";
var result = str.split(/[A-z]/); // 参数是一个正则表达式：表示所有字母
console.log(result);
打印结果: [“1”, “2”, “3”, “4”, “5”, “6”, “7”, “”]
2.search()
var str = "hello abc hello aec afc";
/*
* 搜索字符串中是否含有abc 或 aec 或 afc
*/
result = str.search(/a[bef]c/);
console.log(result); // 打印结果：6
3.match()
var str = "1a2a3a4a5e6f7A8B9C";
var result1 = str.match(/[a-z]/); // 找到符合要求的第一个内容，然后返回
var result2 = str.match(/[a-z]/g); // 设置为“全局匹配”模式，匹配字符串中 所有的小写字母
var result3 = str.match(/[a-z]/gi); // 设置多个匹配模式，匹配字符串中 所有的字母（忽略大小写）
console.log(result1); // 打印结果：["a"]
console.log(result2); // 打印结果：["a", "a", "a", "a", "e", "f"]
console.log(result3); // 打印结果：["a", "a", "a", "a", "e", "f", "A", "B", "C"]
4.replace()
新的字符串 = str.replace(被替换的内容，新的内容);
//replace()方法：替换
var str2 = "Today is fine day,today is fine day !!!"
console.log(str2);
console.log(str2.replace("today","tomorrow")); //只能替换第一个today
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，且为“全局匹配”模式，才能替换所有的today
JavaScript数据类型
基本介绍
| 数据类型 | 英文表示 | 示例 |
|---|---|---|
| 数值类型 | number | age = 1.1; age = 1; |
| 字符串类型 | string | ‘a’ ‘abc’ “abc” |
| 对象类型 | object | null, undefined, [1, 2, 3], {name: ‘zzw’, age: 25} |
| 布尔类型 | boolean | age = true; |
| 函数类型 | function | age = function () { } |
特殊值
| 特殊值 | 含义 |
|---|---|
| undefined | 变量未赋初始值时,默认undefined |
| null | 空值 |
| NaN | Not a Number 非数值 |
创建datatype.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型的特殊值</title>
<script type="text/javascript">
//说明
//1.typeof() 是 JavaScript 语言提供的一个函数
//2.作用是 返回变量的数据类型
//3.这里有 3 个特殊值
// null 空值
// undefined 没有赋初始值时就使用
// NaN 当不能识别类型时
var email;//特殊值 undefined
console.log("email=" + email);//undefined
console.log(typeof email);//undefined
var adress = null;
console.log("adress=" + adress);//null
console.log(typeof adress);//object
console.log(20 * "abc");//NaN: Not a Number
</script>
</head>
<body>
</body>
</html>
数据类型注意事项
String字符串【可以用双引号括起来, 也可以单引号括起来】, 比如
“a book of javascript” ‘abc’ “a”
数据类型转换
Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值。 参考👉
运算符
算术运算符
1.算数运算符用于执行变量与/或值之间的算术运算.
2.y等于5, 下面的表格解释了这些算术运算符.
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 求余数（保留整数） | x=y%2 | x=1 |
| ++ | 累加 | x=++y | x=6 |
| - - | 递减 | x=- -y | x=4 |
赋值运算符
1.赋值运算符用于给 JavaScript 变量赋值
2.给定 x=10 和 y=5, 下面的表格解释了赋值运算符
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
关系运算符
基本介绍
1.关系（比较）运算符在逻辑语句中使用， 以测定变量或值是否相等。
2.给定 x = 5, 下面的表格解释了比较运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| == | 等于(只比较值) | x == 5 为true,x == "5"为true, x == 8为false |
| === | 全等(同时比较值和类型) | x === 5 为true; x === "5"为false |
| != | 等于(只比较值) | x != 8 为true; |
| > | 大于 | x > 8 为false; |
| /< | 小于 | x < 8 为true; |
| >= | 大于或等于 | x >= 8 为false; |
| <= | 小于或等于 | x <= 5 为true; |
注意事项和细节
1.等于: ==是简单的做字面值的比较
2.全等: ===除了做字面值的比较之外, 还会比较两个变量的数据类型.
3.应用实例: 创建关系运算符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系运算符</title>
</head>
<body>
<script type="text/javascript">
var a = "100";
var b = 100;
console.log(typeof a);//string
console.log(typeof b);//number
console.log(a == b);//true 字面值是相同的
console.log(a === b);//false 字面值相同, 但是类型不同
</script>
</body>
</html>
逻辑运算符
基本介绍
1.逻辑运算符用于测定变量或值之间的逻辑.
2.给定 x=6 以及 y=3, 下表解释了逻辑运算符.
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true. |
| || | or | (x == 5 || y == 5) 为 false. |
| ! | not | !(x == y) 为 true. |
注意事项和细节
1.在 JavaScript 语言中, 所有的变量, 都可以作为一个 boolean 类型去使用.
2.0, null, undefined, “”(空串) 都认为是false.
3.&& 且运算, 有两种情况 => 解读(即&&返回值是遵守短路与的机制).
(1)当表达式全为真的时候, 返回最后一个表达式的值.
(2)但表达式中, 有一个为假, 返回第一个为假的表达式的值.
4.|| 或运算, 有两种情况 => 解读(即||返回值是遵守短路或的机制).
(1)当表达式全为假时, 返回最后一个表达式的值.
(2)只要有一个表达式为真, 就会返回第一个为真的表达式的值.
5.&&运算 和 ||运算 有短路现象.
短路现象: 当这个&&运算和||运算有确定结果后, 后面的表达式不再执行.
6.应用实例 逻辑运算符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算符注意事项和使用细节</title>
<script type="text/javascript">
//1. 在JavaScript语言中,所有的变量,都可以作为一个boolean类型的变量去使用
// 体会js语法比较松散
var name = 23.2;
var age = 22;
var n1 = null;
var n2 = "";
var n3 = 0;
var n4;
var n5 = 100 * "abc";
if(!n1) {
alert("hello");
}
//2. 0, null, undefined, ""(空串), NaN 都认为是false
var address = 0;
var address = null;
var address;//undefined
var address = "";
var address = 100 * "hello";//NaN
if (!address) {//NaN
alert("ok~");
}
// Java中逻辑运算符返回布尔值,js中逻辑运算符返回表达式
//3. && 且运算,有两种情况 => (即&&, 返回值遵循短路与的机制)
// 如果都为真,则为真,返回最后一个表达式的值
// 如果第一个为假,则为假,返回第一个表达式的值(后面的表达式不用再判断)
var res1 = "赵志伟" && 120;
alert("res1=" + res1);//120
var res1 = null && 120;
alert("res1=" + res1);//null
//4. || 或运算,有两种情况 => (即||, 返回值遵循短路或的机制)
// 如果都为假,则为假,返回最后一个表达式的值
// 如果第一个为真,则为真,返回第一个表达式的值(后面的表达式不用再判断)
var res2 = "你好,世界" || 120;
alert("res2=" + res2);//你好,世界
var res2 = null || 0;
alert("res2=" + res2);//0
//小练习
var res3 = (10 > 1) && (6 < 0);//返回的是第二个表达式,而(6 < 0)不能作为一个表达式
alert("res3=" + res3);//返回的是(6 < 0), 关系运算符返回布尔值,其值为false
var res4 = (10 > 1) && 0;
alert("res4=" + res4);//返回的是0
var res5 = (10 + 1) || (6 < 0);
alert("res5=" + res5);//返回(10+1),算术运算符, 其值为11
//5.&& 运算 和 || 运算, 有短路情况
var n1 = 1;
var n2 = 3;
var res6 = (n1++ > 100) || n2++;
alert("n1=" + n1 + ", n2=" + n2);
</script>
</head>
<body>
</body>
</html>
条件运算符
1.JavaScript 还可以使用 类似Java的三元运算符.
2.应用实例 条件运算符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件运算符</title>
<script type="text/javascript">
//1.规则 如果(10 > 1) 条件表达式为T,返回第一个表达式的值 一真大师
// 条件表达式为F,返回第二个表达式的值
//js比较灵活
var res = (10 > 1) ? "赵志伟" : 800;
var res = (10 > 1) ? "你好 " + "世界" : 800;
var n1 = 100;
var res = (n1 > 1) ? "你好 " + "世界" : 800 + n1;//"你好 世界"
var res = (n1 < 1) ? "你好 " + "世界" : 800 + n1;//900
alert(res);
</script>
</head>
<body>
</body>
</html>
🔜 下一篇预告: JavaWeb系列三: JavaScript学习 下
📚 目录导航 📚
- JavaWeb系列一: HTML
- JavaWeb系列二: CSS
- JavaWeb系列三: JavaScript学习 上
- JavaWeb系列三: JavaScript学习 下
- JavaWeb系列四: XML 和 DOM4J
- JavaWeb系列五: Tomcat
💬 读者互动 💬
在学习 JavaScript 的过程中，您有哪些新的发现或疑问？欢迎在评论区留言，让我们一起讨论吧！😊
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)