写在开头:本文是学习Java后端开发的个人笔记,便于自己复习。文章内容引用了尚硅谷的javaweb教学,有兴趣的朋友可以上B站搜索。
JavaScript
Ⅰ JavaScript介绍
Ⅱ JavaScript和html代码的结合方式
Ⅲ 变量
Ⅳ 数组
Ⅴ 函数
Ⅵ JS中的自定义对象
Ⅶ JS中的事件
Ⅷ DMO模型
Ⅰ JavaScript介绍
Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品,最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JS 是弱类型,Java 是强类型。
特点:
- 交互性(它可以做的就是信息的动态交互)
- 安全性(不允许直接访问本地硬盘)
- 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无关)
Ⅱ JavaScript和html代码的结合方式
-
第一种方式
只需要在 head 标签中,或者在 body 标签中, 使用 script 标签 来书写 JavaScript 代码<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // alert是JavaScript语言提供的一个警告框函数 // 它可以接受任意类型的参数,这个参数就是警告框的提示信息 alert("hello javaScript!"); </script> </head> <body> </body> </html>
运行结果:
-
第二种方式
使用 script 标签引入 单独的 JavaScript 代码文件
我们在文件夹下新建一个JS文件“1.js”,写入相应的代码;然后在"02-hello.html"中调用它
js代码:alert("hello JavaScript!")
html代码:
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 现在需要使用script引入外部的js文件来执行 src 属性专门用来引入js文件路径(相对路径/绝对路径皆可) script标签可以用来定义js代码,也可以用来引入js文件 但是,两个功能二选一使用。不同同时使用两个功能。 --> <script type="text/javascript" src="1.js"> </script> </head> <body> </body> <html>
Ⅲ 变量与运算符
-
变量
JavaScript 的变量类型:
- 数值类型 number
- 字符串类型 string
- 对象类型 object
- 布尔类型 boolean
- 函数类型 functionJavaScript 里的特殊值:
- undefined 未定义,所有 js 变量未赋于初始值的时候,默认值都是 undefined
- null 空值
- NaN 全称是:Not a Number。非数字。非数值。JS 中的定义变量格式:
var 变量名; var 变量名 = 值;
js示例代码:
var i; // alert(i); // undefined i = 12; // typeof()是 JavaScript 语言提供的一个函数。 // alert( typeof(i) ); // number i = "abc"; // 它可以取变量的数据类型返回 // alert( typeof(i) ); // String var a = 12; var b = "abc"; alert( a * b ); // NaN 是非数字,非数值。
-
运算符
- 关系(比较)运算
等于: == 等于是简单的做字面值的比较
全等于:=== 除了做字面值的比较之外,还会比较两个变量的数据类型js示例代码:
var a = 12; var b = "12"; alert(a == b); //true alert(a === b); //false
- 逻辑运算
且运算: &&
或运算: ||
取反运算: !js示例代码
/* 在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用。 0 、null、 undefined、””(空串) 都认为是 false;*/ /* var a = 0; if(a){ alert("零为真") } else{ alert("零为假") } //零为假 */ /* var b = null; if(b){ alert("null为真"); } else{ alert("null为假") } //null为假 */ /* var c = undefined; if(c){ alert("undefined为真"); } else{ alert("undefined为假") } //undefined为假 */ /* var d = ""; if(d){ alert("空字符串为真"); } else{ alert("空字符串为假") } //空字符串为假 */ /* && 且运算。 有两种情况: 第一种:当表达式全为真的时候。返回最后一个表达式的值。 第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值*/ var a = "abc"; var b = true; var d = false; var c = null; alert(a && b); //true 返回b的值true alert(b && a); //true 返回a的值abc alert(a && d); //false 返回d的值false alert(a && c && d); //false 返回c的值null /* || 或运算。 第一种情况:当表达式全为假时,返回最后一个表达式的值 第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值*/ alert(d || c); //false 返回c的值null alert(c || d); //false 返回d的值false alert(a || c); //true 返回a的值abc alert(d || b || c); //true 返回b的值true
Ⅳ 数组(重点)
JS 中 数组的定义格式:
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
var arr = []; //定义一个空数组
//var arr = [1, true, "yes"];
alert(arr.length); //长度为0
arr[0] = 12;
alert(arr[0]);
alert(arr.length); //长度变为了1
arr[2] = "abc";
alert(arr[2]);
alert(arr.length); //长度变为3
alert(arr[1]); //undefined
//javascript语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动给数组做扩容操作
//数组的遍历
for(var i=0; i<arr.length; i++){
alert(arr[i])
}
Ⅴ 函数(重点)
-
函数的两种定义方式
(1)第一种方式
格式如下://使用function关键字定义函数 function 函数名(形参列表){ 函数体 } //在 JavaScript 语言中,如何定义带有返回值的函数? //只需要在函数体内直接使用 return 语句返回值即可!
js示例代码:
// 定义一个无参函数 function fun() { alert("无参函数fun()被调用了!") } // 函数调用 fun(); // 定义一个有参函数 function fun2(a, b) { alert("有参函数fun2()被调用了! a=>" + a + ",b=>" + b); } // 函数调用 fun2(12,"abc"); //定义一个有返回值的函数 function sum(num1, num2) { var result = num1 + num2; return result; } //调用 alert(sum(100,150));
(2)第二种方式
格式如下:var 函数名 = function(形参列表){ 函数体 }
js示例代码:
// 定义一个无参函数 var fun = function(){ alert("无参函数fun()被调用了!") } // 函数调用 fun(); // 定义一个有参函数 var fun2 = function(a, b) { alert("有参函数fun2()被调用了! a=>" + a + ",b=>" + b); } // 函数调用 fun2(12,"abc"); //定义一个有返回值的函数 var sum = function(num1, num2) { var result = num1 + num2; return result; } //调用 alert(sum(100,150));
注意:JS函数不允许被重载
-
函数的arguments隐形参数(只在function函数内)
就是在 function 函数中不需要定义,但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。可变长参数其他是一个数组。
那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。js示例代码:
//隐形参数示例 function fun(a) { //形参列表个数不影响实参个数 alert(arguments.length) //可看参数个数 alert(arguments[0]); alert(arguments[1]); alert(arguments[2]); alert("a= " + a); for(var i = 0; i < arguments.length; i++){ alert( arguments[i] ); } alert("无参函数 fun()"); } //调用 fun(1,"one",true) //需求:要求 编写 一个函数。用于计算所有number型参数相加的和并返回 function sum(num1, num2) { var result = 0; for(var i=0; i<arguments.length; i++){ //判断当前参数是否是number,若是则相加 if(typeof(arguments[i]) == "number") { result += arguments[i]; } } return result; } //调用 alert(sum(1,2,3,4,"a",5));
Ⅵ JS中的自定义对象
-
Object形式的自定义对象
对象的定义:var 变量名 = new Object(); //对象实例(空对象) 变量名.属性值 = 值; //定义一个属性 变量名.函数名 = function{} //定义一个方法
对象的访问:
变量名.属性 / 函数名();
js示例代码:
//对象的定义及初始化 var obj = new Object(); obj.name = "张三"; obj.age = 18; obj.fun = function () { alert("姓名:" + this.name + " , 年龄:" + this.age); }; //对象的访问 obj.fun();
-
{}花括号形式的自定义对象
对象的定义:var 变量名 = { //对象实例(空对象) 属性名: 值 //定义一个属性 方法名: function{} //定义一个方法 };
对象的访问:
变量名.属性 / 函数名();
js示例代码:
js示例代码: //对象的定义及初始化 var obj = { name:"张三", age:18, fun:function () { alert("姓名:" + this.name + " , 年龄:" + this.age); } }; //对象的访问 alert(obj.name); obj.fun();
Ⅶ JS中的事件(重点)
什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件:
onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作
onclick 单击事件:常用于按钮的点击响应操作。
onblur 失去焦点事件:常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作。
onsubmit 表单提交事件:常用于表单提交前,验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种:
什么是事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。
静态注册事件:通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
动态注册事件:是指先通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件 响应后的代码,叫动态注册。
动态注册基本步骤:
- 获取标签对象
- 标签对象.事件名 = fucntion(){}
onload加载完成事件:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// onload事件方法;用于静态注册
function onloadFun() {
alert('静态注册onload事件,所有代码');
}
// onload事件动态注册,是固定写法
window.onload = function () {
alert("动态注册onload事件")
}
</script>
</head>
<!-- 静态注册onload事件
onload事件是浏览器解析完页面之后就会自动触发的事件
<body οnlοad="onloadFun();">
-->
<body>
</body>
</html>
onclick 单击事件:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// onclick事件方法;用于静态注册
function onclckFun() {
alert("静态注册onclick事件")
}
// 动态注册onclick事件
window.onload = function () {
/*1、获取标签
* document 是js提供的一个对象(文档)
* get 获取
* Element 元素(标签)
* By 通过
* Id id属性
*
* getElementById 通过id属性获取标签对象
**/
var btnObj = document.getElementById("btn01");
/*2、通过标签对象.事件名 = function(){}*/
btnObj.onclick = function () {
alert("动态注册的onclick事件")
}
}
</script>
</head>
<body>
<!-- 静态注册onclick事件 -->
<button onclick="onclckFun()">按钮1</button>
<!-- 动态注册onclick事件 -->
<button id="btn01">按钮2</button>
</body>
</html>
onblur失去焦点事件:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 失去焦点事件函数;用于静态注册
function onblurFun() {
// console是控制台对象,由js提供专门用于向浏览器的控制器打印输出,用于测试使用
// log 是打印的方法
console.log("静态注册失去焦点事件");
}
window.onload = function () {
//1、获取标签对象
var passwdObj = document.getElementById("passwd");
//2、通过 标签对象.事件名 = function(){};
passwdObj.onblur = function () {
console.log("动态注册失去焦点事件")
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun()"><br/>
密码:<input id="passwd" type="text"><br/>
</body>
<html>
onchange内容发生改变事件:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//内容发生改变事件函数;用于静态注册
function onchangeFun() {
alert("您更改了喜欢的选手")
}
// 动态注册内容发生改变事件
window.onload = function () {
//1、获取标签对象
var selOBJ = document.getElementById("sel01");
//2、通过 标签对象.事件名 = function(){};
selOBJ.onchange = function () {
alert("您更改了喜欢的英雄")
}
}
</script>
</head>
<body>
<!-- 静态注册onchange事件 -->
选择你最喜欢的选手:
<select onchange="onchangeFun()">
<option>--选手ID--</option>
<option>IG.TheShy</option>
<option>IG.Ning</option>
<option>RNG.Uzi</option>
<option>TES.JackyLove</option>
<option>FPX.Doinb</option>
</select>
<br/>
选择你最喜欢的英雄:
<select id="sel01">
<option>--英雄名称--</option>
<option>盲僧</option>
<option>德玛西亚皇子</option>
<option>虚空掠夺者</option>
<option>巨魔之王</option>
<option>蜘蛛女王</option>
</select>
</body>
</html>
onsubmit表单提交事件:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 表单提交事件函数;用于静态注册
function onsubmitFun() {
// 要验证所有表单是否合法,如果有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法")
return false;
}
// 动态注册提交表单事件
window.onload = function () {
//1、获取标签对象
var formObj = document.getElementById("form01");
//2、通过标签对象.事件名 = function(){}
formObj.onsubmit = function () {
alert("动态态注册表单提交事件----发现不合法")
return false;
}
}
</script>
</head>
<body>
<!-- return false 可以阻止表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册" />
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册" />
</form>
</body>
</html>
Ⅷ DMO模型(重点)
DOM 全称是 Document Object Model 文档对象模型
通俗来说就是把文档中的标签,属性,文本,转换成为对象来管理。
-
Document对象
Document对象的理解:
第一点:Document 它管理了所有的 HTML 文档内容。
第二点:document 它是一种树结构的文档。有层级关系。
第三点:它让我们把所有的标签 都 对象化。
第四点:我们可以通过 document 访问所有的标签对象。 -
Document对象中的方法介绍
Document对象有如下方法:document.getElementById(elementId):通过标签的 id 属性查找标签 dom 对象,elementId 是标签的 id 属性值
document.getElementsByName(elementName):通过标签的 name 属性查找标签 dom 对象,elementName 标签的 name 属性值
document.getElementsByTagName(tagname):通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement(tagName):方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名注意:
document 对象的三个查询方法,如果有 id 属性,优先使用 getElementById 方法来进行查询
如果没有 id 属性,则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。
getElementById方法:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 需求:当用户点击了较验按钮,要获取输出框中的内容。然后验证其是否合法。
* 验证的规则是:必须由字母,数字。下划线组成。并且长度是 5 到 12 位。
**/
function onclickFun() {
// 当我们要操作一个标签的时候,一定要先获取这个标签对象。
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
// 使用正则表达式验证字符串
var patt = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串,是不是匹配我的规则 ,
* 匹配就返回 true。不匹配就返回 false.
*s*/
var usernameSpanObj = document.getElementById("usernameSpan");
usernameSpanObj.innerText = 'Jarreet558';
if(patt.test(usernameText)){
//用户名合法
// usernameSpanObj.innerHTML = "用户名合法!";
usernameSpanObj.innerText = "<img src=\"right.png\" width=\"18\" height=\"18\">";
}
else{
//用户名不合法
// usernameSpanObj.innerHTML = "用户名不合法!";
usernameSpanObj.innerText = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="jlt"/>
<span id="usernameSpan" style="color:red;">
</span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
getElementsByName方法:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全选
function checkAll() {
// 让所有复选框都选中
// document.getElementsByName();是根据 指定的 name 属性查询返回多个标签对象集合
// 这个集合的操作跟数组 一样
// 集合中每个元素都是 dom 对象
// 这个集合中的元素顺序是他们在 html 页面中从上到下的顺序
var hoobies = document.getElementsByName("hobby");
// checked 表示复选框的选中状态。如果选中是 true,不选中是 false
// checked 这个属性可读,可写
for(var i=0; i<hoobies.length; i++){
hoobies[i].checked = true;
}
}
// 全不选
function checkNo() {
var hoobies = document.getElementsByName("hobby");
for(var i=0; i<hoobies.length; i++){
hoobies[i].checked = false;
}
}
//反选
function checkReverse() {
var hoobies = document.getElementsByName("hobby");
for(var i=0; i<hoobies.length; i++){
hoobies[i].checked = !hoobies[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
getElementsByTagName方法:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全选
function checkAll() {
// document.getElementsByTagName("input");是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组 一样
// 集合中都是 dom 对象
// 集合中元素顺序 是他们在 html 页面中从上到下的顺序
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>
createElement:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 现在需要我们使用 js 代码来创建 html 标签,并显示在页面上
// 标签的内容就是:<div>Hello World!</div>
var divOvj = document.createElement("div"); // 在内存中 <div></div>
divOvj.innerHTML = "Hello World!"; // 有一个文本节点对象 #Hello World!
// 添加子元素
document.body.appendChild(divOvj);
}
</script>
</head>
<body>
</body>
</html>
-
节点的常用属性和方法
节点就是标签对象
方法:
- 通过具体的元素节点调用getElementsByTagName() 方法,获取当前节点的指定标签名孩子节点
- appendChild( oChildNode ) 方法,可以添加一个子节点,oChildNode 是要添加的孩子节点属性:
- childNodes
属性,获取当前节点的所有子节点
- firstChild
属性,获取当前节点的第一个子节点
- lastChild
属性,获取当前节点的最后一个子节点
- parentNode
属性,获取当前节点的父节点
- nextSibling
属性,获取当前节点的下一个节点
- previousSibling
属性,获取当前节点的上一个节点
- className
用于获取或设置标签的 class 属性值
- innerHTML
属性,表示获取/设置起始标签和结束标签中的内容
- innerText
属性,表示获取/设置起始标签和结束标签中的文本