Java教程
JavaScript-笔记
笔记目录
- 1 JS 和 java
- 2 JavaScript和Html结合
- 1) 第一种方式
- 2) 第二种方式
- 3 JavaScript语法
- 1）变量类型
- 2）特殊值
- 3）变量定义格式
- 4）关系（比较）运算
- 5）逻辑运算
- 6）数组
- 7）函数
- 8）arguments 隐形参数
- 9）自定义对象
- 1 Object 形式的自定义对象
- 2 {}花括号形式的自定义对象
- 4 JS事件
- 0）什么是事件❓
- 1）常用的事件
- 2）事件的注册
- 1 onl oad 加载完成事件
- 2 onclick 单击事件
- 3 onblur 失去焦点事件
- 4 onsubmit 表单提交事件
- 5 DOM模型
- 1）Document 对象的理解
- 2）Document 对象中的方法介绍（重点）
- 3） 节点的方法和属性
- 方法 ：
- 属性：
1 JS 和 java
1） JS是弱类型：类型可变。
如：
var i; i = 12; 数值型 i = "abc"; 字符串类型
特点：
1、交互性（它可以做信息的动态交互）
2、安全性（不允许直接访问本地硬盘）
3、跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关 ）
2）java是强类型：定义变量时，类型已确定，且不可变。
2 JavaScript和Html结合
1) 第一种方式
在head 标签中，或者在body标签中，使用 script 标签 写JavaScript 代码
<head>
<meta charset="UTF-8">
<title>Do</title>
<script type="text/javascript">
// alert 是 JavaScript 语言提供的一个警告框函数。
// 它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("杜宇好美啊！！！！")
</script>
</head>
2) 第二种方式
使用 script 标签引入单独的 JavaScript 文件
例如使用：
<script type="text/javascript" src="../js/1.js" ></script>
3 JavaScript语法
1）变量类型
数值类型 number
字符串类型 string
对象类型 object
布尔类型 boolean
函数类型 function
2）特殊值
undefined 未定义，所有 js 变量未赋予初始值时，默认值都为undefined
null 空值
NAN Not a number 。非数值
3）变量定义格式
var 变量名;
var 变量名 = 值;
4）关系（比较）运算
等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
5）逻辑运算
且运算： &&
或运算： ||
取反运算： !
6）数组
1 数组的定义：
格式：
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
7）函数
格式 1 ：
function 函数名(形参列表){
函数体
}
在 JavaScript 语言中，如何定义带有返回值的函数呢 ❓
答：只需要在函数体内直接使用 return 语句返回值即可。
例如：
function fun(){
alert("do a good job.")
}
// fun();
function fun1(a,b){
alert(a+b);
}
// fun1(1,2);
function fun2(a,b){
return a*b;
}
alert(fun2(1,2));
格式 2：
var 函数名 = function(形参列表) { 函数体 }
<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>
8）arguments 隐形参数
在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
public void fun( Object … args );
可变长参数是一个数组。
那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。
隐藏参数arguments对可函数形参做操作：
<script type="text/javascript" >
function sum(){
var result=0;
for(var i=0;i<arguments.length;i++){
if(typeof arguments[i] == "number"){
result+=arguments[i];
}
}
alert(result);
}
sum(1,2,3,4,"sad",1,1);
</script>
9）自定义对象
1 Object 形式的自定义对象
对象的定义：
var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问：
变量名.属性 / 函数名();
例如：
<script type="text/javascript">
var obj=new Object();
obj.name="美女";
obj.sex="男";
obj.fun= function (){
alert("姓名:"+this.name+"-----性别:"+this.sex);
}
alert(obj.name);
alert(obj.sex);
obj.fun();
</script>
2 {}花括号形式的自定义对象
对象的定义：
var 变量名 = { // 空对象
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
…
函数名：function(){} // 定义一个函数
};
对象的访问：
变量名.属性 / 函数名();
Eg::
<script type="text/javascript">
var obj={
name:"半夏",
sex:"男",
fun:function (){
alert("姓名："+this.name+"，性别："+this.sex);
}
};
alert(obj.name);
alert(obj.sex);
obj.fun();
</script>
4 JS事件
0）什么是事件❓
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
1）常用的事件
onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
2）事件的注册
什么是事件的注册（绑定）❓
就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
事件的注册又分为静态注册和动态注册两种：
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件
响应后的代码，叫动态注册。
- 动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}
1 onl oad 加载完成事件
onload 事件是浏览器解析完页面之后就会自动触发的事件。
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// onl oad 事件静态注册
// <!--静态注册 onl oad 事件 <body οnlοad="onloadFun();"> -->
function onl oadFun() {
alert('静态注册 onl oad 事件，所有代码');
}
// onl oad 事件动态注册。是固定写法
window.onload = function () {
alert("动态注册的 onl oad 事件");
}
</script>
</head>
<body> </body>
</html>
2 onclick 单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册 onclick 事件");
}
// 动态注册 onclick 事件
window.onload = function () {
// 1 获取标签对象
/**
* document 是 JavaScript 语言提供的一个对象（文档）<br/>
* 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="onclickFun();">按钮 1</button>
<!--动态注册 onClick 事件-->
<button id="btn01">按钮 2</button>
</body>
</html>
3 onblur 失去焦点事件
<!DOCTYPE html>
<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>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>
4 onsubmit 表单提交事件
return false 可以阻止表单提交 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
// 静态注册表单提交事务
function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
// 动态注册表单提交事务
window.onload = function () {
//1 获取标签对象
var formObj = document.getElementById("form01");
//2 通过标签对象.事件名 = function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false; }
}
</script>
</head>
<body>
<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>
5 DOM模型
DOM 全称是 Document Object Model 文档对象模型。
1）Document 对象的理解
第一点：Document 它管理了所有的HTML文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签 都 对象化
第四点：我们可以通过 document 访问所有的标签对象。
2）Document 对象中的方法介绍（重点）
1 document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
2 document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
3 document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
4 document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
注：
document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
/**
* 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。
* 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。
*/
function onclickFun() {
// 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 = "用户名合法！";
usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
} else {
// alert("用户名不合法！");
// usernameSpanObj.innerHTML = "用户名不合法！";
usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="wzg"/>
<span id="usernameSpan" style="color:red;"> </span>
<button onclick="onclickFun()">较验</button>
</body>
</html>
3） 节点的方法和属性
节点就是标签对象。
方法 ：
getElementsByTagName() 获取当前节点的指定标签名孩子节点 appendChild( oChildNode ) 可以添加一个子节点 , oChildNode 添加的孩子节点
属性：
childNodes 获取当前节点的所有子节点 firstChild 获取当前节点的第一个子节点 lastChild 获取当前节点的最后一个子节点 parentNode 获取当前节点的父节点 nextSibling 获取当前节点的下一个节点 previousSibling 获取当前节点的上一个节点 className 用于获取或设置标签的 class 属性值 innerHTML 表示获取/设置起始标签和结束标签中的内容 innerText 表示获取/设置起始标签和结束标签中的文本
-
小米11i印度快充版ROM合集：极致体验，超越期待10-06
-
【ROM下载】小米11i 5G 印度版系统， 疾速跃迁，定义新速度10-06
-
【ROM下载】小米 11 青春活力版，青春无极限，活力全开10-06
-
小米13T Pro系统合集：性能与摄影的极致融合，值得你升级的系统ROM10-05
-
基于Python+Vue开发的医院门诊预约挂号系统10-01
-
基于Python+Vue开发的旅游景区管理系统10-01
-
RestfulAPI入门指南：打造简单易懂的API接口10-01
-
初学者指南：了解和使用Server Action10-01
-
Server Component入门指南：搭建与配置详解10-01
-
React 中使用 useRequest 实现数据请求10-01
-
使用 golang 将ETH账户的资产平均分散到其他账户10-01
-
JWT用户校验课程：从入门到实践10-01
-
Server Component课程入门指南10-01
-
Dnd-Kit学习：新手快速入门指南09-30
-
ESLint学习：初学者指南09-30
