Java Web(1)-JavaScript
1、 Combination of JavaScript and HTML code
1. The first method
Just use the script tag in the head tag or the body tag to write JavaScript code
<!DOCTYPE html>
<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>
2. The second method
Use the script tag to introduce a separate JavaScript code file
<!DOCTYPE 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>
<script type="text/javascript">
alert("国哥现在可以帅了");
</script> </head> <body>
</body>
</html>
2、 Variable
What are variables? A variable is the name of memory that can hold certain values. Variable type of javascript:
Special value in javascript: undefined. When all JS variables are not assigned initial values, the default value is undefined The full name of null value Nan is: notanount. Non numeric. Non numerical
The definition variable format in JS: VAR variable name; Var variable name = value;
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
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是 非 数 字 ， 非 数 值 。
</script>
</head>
<body>
</body>
</html>
3、 Common operations
1. Relation (comparison) operation
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = "12";
var b = 12;
alert( a == b ); // true
alert( a === b ); // false
</script> </head> <body>
</body> </html>
2. Logical operation
In the JavaScript language, all variables can be used as Boolean variables. 0, null, undefined, "" (empty string) are considered false; be careful:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = 0;
if (a) {
alert(" 零 为 真 ");
} else {
alert(" 零 为 假 ");
}
var b = null;
if (b) {
alert("null为 真 ");
} else {
alert("null为 假 ");
}
var c = undefined;
if (c) {
alert("undefined为 真 ");
} else {
alert("undefined为 假 ");
}
var d = "";
if (d) {
alert(" 空 串 为 真 ");
} else {
alert(" 空 串 为 假 ");
}
var a = "abc";
var b = true;
var d = false;
var c = null;
alert( a && b );//true
alert( b && a );//true
alert( a && d ); // false
alert( a && c ); // null
alert( d || c ); // null
alert( c|| d ); //false
alert( a || c ); //abc
alert( b || c ); //true
</script>
</head>
<body>
</body>
</html>
4、 Array
1. Array definition method
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr = [true,1]; //定 义 数 组
// alert( arr.length ); // 2
arr[0] = 12;
// alert( arr[0] );//12
// javaScript语 言 中 的 数 组 ， 只 要 我 们 通 过 数 组 下 标 赋 值 ， 那 么 最 大 的 下 标 值 ， 就 会 自 动 的 给 数 组 做 扩 容 操 作 。
arr[2] = "abc";
alert(arr.length); //3
// alert(arr[1]);// undefined
// 数 组 的 遍 历
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
</script> </head>
<body>
</body> </html>
5、 Functions
Two definitions of functions
1. The first definition method
You can use the function keyword to define a function
Function function name (formal parameter list){
Function body
}How to define a function with a return value in the JavaScript language? Just use the return statement directly in the function body to return the value!
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 定 义 一 个 无 参 函 数
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,50) );
</script> </head> <body>
</body> </html>
2. The second definition method
Var function name = function (formal parameter list){
Function body
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var fun = function () {
alert("无参函数");
}
fun();
var fun2 = function (a,b) {
alert("有参函数 a=" + a + ",b=" + b);
}
fun2(1,2);
var fun3 = function (num1,num2) {
return num1 + num2;
}
alert( fun3(100,200) );
</script>
</head>
<body>
</body>
</html>
Note: function overloading is allowed in Java. However, in JS, function overloading will directly overwrite the previous definition
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fun() {
alert("无参函数 fun()");
}
function fun(a,b) {
alert("有参函数 fun(a,b)");
}
fun();
</script>
</head>
<body>
</body>
</html>
3. Arguments invisible parameter of function
Only in the function function, that is, variables that do not need to be defined in the function function, but can be directly used to obtain all parameters. We call it stealth parameter
Invisible parameters are especially like Java based variable length parameters.
public void fun(Object...args); , The variable length parameter is an array
Then the invisible parameters in JS are the same as the variable length parameters in Java, and the operation is similar to array
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
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,"ad",true);
//需 求 ： 要 求 编 写 一 个 函 数 。 用 于 计 算 所 有 参 数 相 加 的 和 并 返 回
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number") {
result += arguments[i]; }
}
return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
</script>
</head>
<body>
</body>
</html>
6、 Custom objects in JS
1. Custom object in the form of object
Definition of object:
Var variable name = newobject()// Object instance (empty object)
Variable name Attribute name = value// Define an attribute
变量名.函数名 =function(){} // 定义一个函数
Object access:
Variable name Property / function name ();
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = new Object();
obj.name = "马达";
obj.age = 18;
obj.fun = function () {
alert("姓名：" + this.name + ",年龄：" + this.age);
}
// 对象的访问
// alert(obj.name);
obj.fun();
</script>
</head>
<body>
</body>
</html>
2. {} custom objects in curly braces
Definition of object:
Var variable name = {/ / empty object
Attribute name: value, / / define an attribute
Attribute name: value, / / define an attribute
Function name: function() {} / / define a function
};
Object access:
Variable name Property / function name ();
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = {
name: "马达",age: 18,fun: function () {
alert("姓名：" + this.name + ",年龄：" + this.age);
}
};
// alert(obj.name);
obj.fun();
</script>
</head>
<body>
</body>
</html>
7、 Events in JS
What is an event? Event is the response of the computer input device to interact with the page, which is called event
1. Common events
Event registration is divided into static registration and dynamic registration
What is event registration (binding)?
In fact, it tells the browser what operation code to execute after the event response, which is called event registration or event binding.
2. Static registration event
The event attribute of the HTML tag is directly assigned to the code after the event response. This method is called static registration
3. Dynamic registration events
It refers to getting the DOM object of the tag through JS code first, and then through the DOM object Event name = function() {} This form is assigned to the code after the event response, which is called dynamic registration
Basic steps of dynamic registration:
4. Onload loading completion event
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// function onLoadFun() {
// alert("静态注册onload事件");
// }
// 这个是动态注册，固定的写法
window.onload = function () {
alert("动态注册onload事件");
}
</script>
</head>
<!--静态注册onload事件，这个事件是在浏览器解析完页面之后自动触发的事件，里面自定义的函数
<body onload="onLoadFun()">
-->
</body>
</html>
5. Onclick click event
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// function onclickFun() {
// alert("静态注册onclick事件");
// }
// 动态注册
window.onload = function () {
// 1. 获取标签对象
// document是JS语言提供的一个对象
// 通过属性的id来获取标签对象
var b = document.getElementById("b01");
// alert(b);
// 2. 通过标签对象.事件名 = function (){}
b.onclick = function () {
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<!-- 静态注册onclick-->
<button onclick="onclickFun();">按钮1</button>
<button id="b01">按钮2</button>
</body>
</html>
6. Onblur loss of focus event
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静 态 注 册 失 去 焦 点 事 件
function onblurFun() {
// console 是 控 制 台 对 象 ， 是 由 JavaScript语 言 提 供 ， 专 门 用 来 向 浏 览 器 的 控 制 器 打 印 输 出 ， 用 于 测 试 使 用
// log()
console.log("静态注册失去焦点事件");
}
// 动态注册
window.onload = function () {
//1 获 取 标 签 对 象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
// 2 通 过 标 签 对 象 . 事 件 名 = function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text"><br/>
</body>
</html>
7. Onchange content change event
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("电影改变");
}
window.onload = function () {
var sObj = document.getElementById("s01");
sObj.onchange = function () {
alert("书籍已经改变");
}
}
</script>
</head>
<body>
<!--静态注册事件-->
请选择你喜欢看的电影
<select onchange="onchangeFun();">
<option>--电影--</option>
<option>盗墓笔记</option>
<option>黑客帝国</option>
<option>千与千寻</option>
</select>
<br>
请选择你喜欢看的书籍
<select id="s01">
<option>--书籍--</option>
<option>平凡的世界</option>
<option>小王子</option>
<option>解忧杂货店</option>
</select>
</body>
</html>
8. Onsubmit form submission event
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册表单提交事务
function onsubmitFun() {
alert("提交不合法");
return false;
}
// 动态注册表单提交事务
window.onload = function () {
var formObj = document.getElementById("form01");
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>
8、 DOM model
The full name of DOM is documentobjectmodel. Document object model is to convert labels, attributes and text in documents into objects for management. So how do they manage tags, attributes and text by converting them into objects
1. Document object
Understanding of document object:
2. Method introduction in document object
be careful:
The three query methods of the document object, if there is an ID attribute,
The getelementbyid method is preferred for query. If there is no ID attribute, the getelementsbyname method is preferred for query. If there is no ID attribute and name attribute, the above three methods of getElementsByTagName by tag name must be executed after the page is loaded before the tag object can be queried
3. Getelementbyid method
Requirement: when the user clicks the verification button, the content in the output box shall be obtained. Then verify whether it is legal.
The verification rule is: it must be composed of letters, numbers and underscores. And the length is 5 to 12 bits
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onClick() {
// 1 当我们要 操 作 一 个 标 签 的 时 候 ， 一 定 要 先 获 取 这 个 标 签 对 象 。
var usernameObj = document.getElementById("username");
// [object HTMLInputElement] 就是dom对象
var usernameText = usernameObj.value;
//如 何 验 证 字 符 串 ， 符 合 某 个 规 则 ， 需 要 使 用 正 则 表 达 式 技 术
var patt = /^\w{5,12}$/;
/*
test() 方 法 用 于 测 试 某 个 字 符 串 ， 是 不 是 匹 配 我 的 规 则 ，
匹配就返回true，否则返回false
*/
var usernameSpanObj = document.getElementById("usernameSpan");
// innerHTML表 示 起 始 标 签 和 结 束 标 签 中 的 内 容
// innerHTML 这个属性可读，可写
usernameSpanObj.innerHTML = "你好！";
if (patt.test(usernameText)) {
alert("用户名合法");
usernameSpanObj.innerHTML = "用户名合法！";
}else{
alert("用户名不合法");
usernameSpanObj.innerHTML = "用户名不合法！";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="md">
<span id="usernameSpan" style="color: red;">
</span>
<button onclick="onClick()">校验</button>
</body>
</html>
4. Getelementsbyname method
Make all check boxes selected
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkAll() {
// document.getElementsByName("hobby"),是根据指定的name来查询返回多个标签对象集合
// 这个集合的操作和数组一样，集合中每个元素都是dom对象
// 这个集合中元素的顺序是按照html页面的上下顺序
var hobbies = document.getElementsByName("hobby");
// checked表示复选框的选中状态，选中是true
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
// 全不选
function checkNo() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = false;
}
}
// 反选
// 这里用的取反操作
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = !hobbies[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="check@R_214_2419@" name="hobby" value="c" checked="checked"> C
<input type="check@R_214_2419@" name="hobby" value="java"> Java
<input type="check@R_214_2419@" name="hobby" value="python"> Python
<br>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全部选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
5. GetElementsByTagName method
It is also a select all operation
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkAll() {
// document.getElementsByTagName("input"),// 是根据指定标签名来查询返回多个标签对象集合
// 这个集合的操作和数组一样，集合中每个元素都是dom对象
// 这个集合中元素的顺序是按照html页面的上下顺序
var hobbies = document.getElementsByTagName("input");
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="check@R_214_2419@" name="hobby" value="c" checked="checked"> C
<input type="check@R_214_2419@" name="hobby" value="java"> Java
<input type="check@R_214_2419@" name="hobby" value="python"> Python
<br>
<button onclick="checkAll()">全选</button>
</body>
</html>
6. CreateElement method
Use js code to create HTML tags
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 在内存中有<div> </div>
var divObj = document.createElement("div");
// 有一个文本节点对象 你好，山丘
var textNodeObj = document.createTextNode("你好，山丘");
// <div>你好，山丘 </div>
divObj.appendChild(textNodeObj);
// 添加子元素，在body里
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>
7. Common attributes and methods of nodes
method:
Properties:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 1. 查找#bj节点
document.getElementById("b01").onclick = function () {
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML);
};
// 2. 查找所有 li 节点
var but02Ele = document.getElementById("b02");
but02Ele.onclick = function () {
var lis = document.getElementsByTagName("li");
alert(lis.length);
};
// 3. 查找 name=gender 的所有节点
var but03Ele = document.getElementById("b03");
but03Ele.onclick = function () {
var genders = document.getElementsByName("gender");
alert(genders.length);
};
// 4. 查找#city 下所有 li 节点
var but04Ele = document.getElementById("b04");
but04Ele.onclick = function () {
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length);
};
// 5. 返回#city 的所有子节点
var but05Ele = document.getElementById("b05");
but05Ele.onclick = function () {
var obj = document.getElementById("city").childNodes;
console.log(obj.length);
for (var i = 0; i < obj.length; i++){
console.log(obj[i]);
}
};
// 6. 返回#phone 的第一个子节点
var but06Ele = document.getElementById("b06");
but06Ele.onclick = function () {
var objphone = document.getElementById("phone").firstElementChild;
alert(objphone.innerHTML);
};
// 7. 返回#bj 的父节点
var but07Ele = document.getElementById("b07");
but07Ele.onclick = function () {
var objbj = document.getElementById("bj").parentNode;
alert(objbj.innerHTML);
};
// 8. 返回#ML 的前一个兄弟节点
var but08Ele = document.getElementById("b08");
but08Ele.onclick = function () {
alert(document.getElementById("ML").prevIoUsElementSibling.innerHTML);
};
// 9. 返回#username 的 value 属性值
var but09Ele = document.getElementById("b09");
but09Ele.onclick = function () {
alert(document.getElementById("username").value);
};
// 10. 设置#username 的 value 属性值
var but10Ele = document.getElementById("b10");
but10Ele.onclick = function () {
document.getElementById("username").value = "山丘";
};
// 11. 返回#city 的文本值
var but11Ele = document.getElementById("b11");
but11Ele.onclick = function () {
alert(document.getElementById("city").innerText);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢那个城市？
</p>
<ul id="city">
<li id="bj">北京</li>
<li>南京</li>
<li>东京</li>
<li>上海</li>
</ul>
<br>
<p>
你喜欢那款游戏？
</p>
<ul id="game">
<li id="wz">王者荣耀</li>
<li>飞车</li>
<li>联盟</li>
<li>DNF</li>
</ul>
<br>
<p>
你的手机是什么品牌?
</p>
<ul id="phone">
<li>华为</li>
<li id="ML">小米</li>
<li>oppo</li>
<li>一加</li>
</ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male">
Male
<input type="radio" name="gender" value="female">
Female
<br>
name:
<input type="text" name="name" id="username" value="md">
</div>
</div>
<div id="btuList">
<div><button id="b01">查找#bj节点</button></div>
<div><button id="b02">查找所有 li 节点</button></div>
<div><button id="b03">查找 name=gender 的所有节点</button></div>
<div><button id="b04">查找#city 下所有 li 节点</button></div>
<div><button id="b05">返回#city 的所有子节点</button></div>
<div><button id="b06">返回#phone 的第一个子节点</button></div>
<div><button id="b07">返回#bj 的父节点</button></div>
<div><button id="b08">返回#android 的前一个兄弟节点</button></div>
<div><button id="b09">返回#username 的 value 属性值</button></div>
<div><button id="b10">设置#username 的 value 属性值</button></div>
<div><button id="b11">返回#city 的文本值</button></div>
</div>
</body>
</html>