JS基础
JS语言概述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloJS</title>
<!--
JS是弱类型，Java是强类型
弱类型：定义了还是可以改变
强类型：定义了就不能改变
特点：
1. 交互性（它可以做的就是信息的动态交互
2. 安全性（不允许直接访问本地硬盘
3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关
JS和html结合方式
①在head或body标签中，用script标签写
②独立创建一个js文件，然后引入js文件
注意：两种方式不能同时使用，如果标签里面已经引入了js文件，那么久不能在标签里面写代码了，
这个时候可以创建一个新的script标签，在新的标签里面写代码
代码的执行方式：和java的一样，顺序结构执行
alert()函数：弹出一个警告框
-->
<script type="text/javascript " src="Hello.js"></script>
<script type="text/javascript">
alert("Hello，JavaScript")
</script>
</head>
<body>
<script type="text/javascript">
alert("我是在body里面实验的代码")
</script>
</body>
</html>
变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test变量</title>
<script type="text/javascript" >
/*
变量
要注意的点：
①和java不同的是，js定义变量不用先定义类型
②和java一样是后面的值覆盖前面的
③所类型的默认值为undefined，不是为null，null值是要显示赋值的
JS 的变量类型：
数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
typeof()方法：返回变量的数据类型
JS里特殊的值：
undefined 未定义，所 js 变量未赋于初始值的时候，默认值都是 undefined.
null 空值
NaN 全称是：Not a Number。非数字。非数值。
JS定义变量的格式：
var 变量名;
var 变量名 = 值;
*/
var number1 = 1;
alert(number1) //默认值是undefined
var number1 = 12;
alert(number1)
//测试特殊的值
var a = null;
var b = undefined;
var str = "小智";
var num = 1;
alert(num * str) //这时候就会显示NaN，非数字
//typeof()方法
var of = 1;
alert(typeof(of))
</script>
</head>
<body>
</body>
</html>
运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test运算符</title>
<script type="text/javascript" >
/*
运算符
比较运算符
其他的和java都一样，下面的两个是和java不一样的
①等于： == 等于是简单的做字面值的比较,两者的类型可以是不用的，底层会做类型转化
②全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
js逻辑运算符个：逻辑非!、逻辑与&&、逻辑或||。
所谓短路操作就是，当&&的第一个操作数的值是false时，
直接返回第一个操作数的值，不再对第二个操作数进行计算；
&&的两种情况：
①当表达式全为真的时候，返回最后一个表达式的值
②当表达式中一个为假的时候，返回第一个为假的表达式的值
||的两种情况：
①当表达式全部为假的时候，返回最后一个表达式的值
②只要一个表达式为真，就会返回第一个为真的表达式的值
总结：&&全部为真，取最后一个，||全部为假，取最后一个
&&一个为假，去第一个，||一个为真，去第一个
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、””(空串) 都认为是 false；
*/
//==等于
// var number = 1;
// var str = "1";
// alert(number == str ) //true
//
// //===全等于
// alert(number === str) //true
//
// //逻辑运算符
var a = 0; //0也是false
var b = ""; //空字符串也是false
var e = false;
var c = true;
var d = 1;
/*
&&
第一种情况：表达式中有一个为假，取第一个为假的表达式的值返回
第二种情况：表达式中所都为真，返会第一个表达式的值
*/
// alert(d && b && a)
// alert(c && d)
/*
||
第一种情况：表达式中有一个为真，取第一个为真的表达式的值返回
第二种情况：表达式中没一个为真，取最后一个表达式的值返回
*/
//alert(a || b || e)
alert(e || d || c)
</script>
</head>
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test数组</title>
<script type="text/javascript" >
/*
数组:
格式：
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
扩容方式：以最大的索引扩容，比如说我创建了一个空的数组number[]，
给索引值为10的赋值，那么这个时候数组会自动扩容到10，其他没赋值的就是默认值undefined
特点：js的数组和java的数组不一样，它不用在创建的时候规定长度，而是在创建后再进行扩容
*/
var numbers = [true,5,5];
numbers[1] = "小智";
alert(numbers[100])
for (var i = 0;i < numbers.length;i++){
alert(numbers[i])
}
</script>
</head>
<body>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test函数</title>
<script type="text/javascript">
/*
定义函数的两种方式
第一种：可以用function关键字来定义函数
格式：
function 函数名(形参列表){
函数体
}
特点：因为js的变量是不确定的，所以多个形参的时候不用写类型，直接用形参名(a1,a2)
第二种：用变量的方式
格式：
var 函数名 = function(形参列表) {
函数体
}
注意：JS不允许重载，重载了也没用
*/
//第一种方式
function info(){ //无参
alert("无参的函数")
}
function info2(a1,a2){ //参返回值
return a1 + a2;
}
alert(info(1,"小猪佩奇"));
alert(info2(1,"小猪佩奇"));
//第二种方式
var init = function(){
alert("无参的函数")
}
init();
</script>
</head>
<body>
</body>
</html>
函数的arguments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test隐形函数</title>
<script type="text/javascript" >
/*
函数的 arguments 隐形参数（只在 function 函数内
arguments相当于是javase中方法里面的可变形参一样
public void demo(int...numbers){}
隐形函数的操作和java中的数组是类似的
*/
// function fun() {
// alert(arguments[1])
// alert(arguments[2])
// alert(arguments[3])
// //遍历
// for (var i = 0; i < arguments.length; i++) {
// alert(arguments[i])
// }
// }
// fun(1,2,3,4,); //传入的参数会被当成是隐藏函数，遍历的话是全部遍历的
// 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
function fun2() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number"){ //加一个判断，如果是数字类型就要
sum += arguments[i]
}
}
alert(sum)
}
fun2(1,2,3,4,5,"小智",6,7,8,9,10) //在js中字符串进行计算，也是进行字符串拼接
</script>
</head>
<body>
</body>
</html>
自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test自定义对象</title>
<script type="text/javascript">
/*
自定义对象：
①Object形式
格式：
var 变量名 = new Object(); //空对象
变量名.属性名 = 值; // 定义属性
变量名.函数名 = function(){} // 定义函数
②{}花括号形式
格式：var 变量名 = {
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} //定义函数
};
注意：属性和方法之间是逗号隔开的，最后一个不用写逗号
两种方式的调用方法都是：变量名.属性名/函数名()
函数里面是可以用this关键字的，和java的一样
*/
//①Object形式
var obj = new Object();
obj.name = "小智";
obj.init = function () {
alert(this.name)
}
obj.init(); //调用方法
//{}形式
var a = {
name:"小智",
age:18,
init:function () {
alert(this.name + "永远" + this.age)
}
}
a.init()
</script>
</head>
<body>
</body>
</html>
JS事件
事件的概述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
事件注册
js 中的事件
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所表单项是否合法。
事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
注意：可以在标签里面写function的代码，但是不建议，代码的可读性太差，所以一般都是在script标签里面写的
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件
响应后的代码，叫动态注册。
动态注册基本步骤：
1、获取标签对象 window是顶层对象，其他的都是他的字对象
2、标签对象.事件名 = fucntion(){}
-->
</body>
</html>
onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestOnload</title>
<script type="text/javascript">
//静态注册
function fun() {
alert("静态注册")
};
//动态注册
window.onload = function () {
alert("动态注册")
}
</script>
</head>
<body onload="fun()">
<!--
onload事件是在浏览器加载完后执行的代码，
可以理解成是java中的代码块，创建对象的时候就调用了
静态注册是在body标签上写的，动态注册是在js代码里面，如果静态注册和动态注册同时存在，
那么只会执行静态注册，所以要注意两者的使用
-->
</body>
</html>
onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test单击事件</title>
<script type="text/javascript">
function fun() {
alert("我是静态注册的钮1")
}
window.onload = function () {
//1.获取标签对象
var but02 = document.getElementById("but02"); //id要用引号引起来
/*
get 获取
Element 元素（就是标签
By 通过。。。
Id id
getElementById(id)：通过id获取元素
*/
but02.onclick = function () {
alert("我是动态注册的钮2")
}
}
</script>
</head>
<body>
<!--
单击事件：
点击相应，比如一些按钮或者一些网页的操作给出相应的反应
-->
<button onclick="fun()">钮1</button> <!--静态注册-->
<button id="but02">钮2</button>
</body>
</html>
onblur事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestOnblur</title>
<script type="text/javascript">
/*
onblur失去焦点事件
失去焦点事件：光标移出外面点击就会执行函数
console是控制台对象，是由JavaScript提供的，专门用于浏览器的控制台输出的，用于测试使用
log()和java的print()一样，是打印方法
*/
//静态注册
function fun() {
console.log("静态注册")
}
//动态注册
window.onblur = function () {
//1.获得标签对象
var elementById = document.getElementById("doc01");
//2.标签对象.事件名
elementById.onblur = function () {
console.log("动态注册")
}
}
</script>
</head>
<body>
<form>
用户名<input type="text" onblur="fun();"/><br>
用户密码<input type="password" id="doc01"/>
</form>
</body>
</html>
onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestOnchange</title>
<script type="text/javascript">
/*
onchange内容发生改变事件
如果内容发生改变，那么就会调用函数
注意：如果内容没发生改变，那么是不会调用函数的，比如下拉列表如果你不换项，那么就不会调用函数
*/
//静态注册
function fun() {
alert("女神发生了变化")
}
//动态注册
window.onchange = function () {
//1.得到标签对象
var elementById = document.getElementById("doc01");
//2.标签对象.事件名
elementById.onchange = function () {
alert("男生发生了变化")
}
}
</script>
</head>
<body>
<select onchange="fun()"> <!--静态注册-->
<option>--女神--</option>
<option>小苍</option>
<option>海椒</option>
<option>刘亦菲</option>
</select>
<select id="doc01"> <!--动态注册-->
<option>--男神--</option>
<option>小智</option>
<option>狗栋</option>
<option>叼林</option>
</select>
</body>
</html>
onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestOnsubmit</title>
<script type="text/javascript" >
/*
onsubmit提交表事件
如果返回给onsubmit的参数为false，那么发送不成功，如果是true就发送成功
*/
//静态注册
function fun() {
alert("静态注册---您的输入不合法")
return false;
}
//动态注册
window.onsubmit = function () {
//1.得到标签对象
var elementById = document.getElementById("doc01");
//2.标签对象.事件名
elementById.onsubmit = function () {
alert("动态注册---您的输入不合法")
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost8080 " method="get" onsubmit="return fun()">
用户名<input type="text" value="静态注册"/>
<input type="submit" value="校验">
</form>
<form action="http://localhost8080 " method="get" id="doc01">
用户名<input type="text" value="动态注册"/>
<input type="submit" value="校验"/>
</form>
</body>
</html>
document对象
document对象的概述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sjHL8EWV-1606828824502)(C:\Users\猛男\AppData\Roaming\Typora\typora-user-images\image-20201128130202727.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript">
/*
DOM模型
DOM 全称是 Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。学习的重点
什么是对象化，将代码封装到对象里面
Document 对象的理解：
第一点：Document 它管理了所的 HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
最常见的就是 html标签
head标签 body标签
第点：它让我们把所的标签 都 对象化
第四点：我们可以通过 document 访问所的标签对象。
Document对象方法：
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)：返回一个dom对象的集合
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)：返回dom对象集合
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
document.createTextNode("文本内容")：创建一个文本节点
字符串也是属于文本节点的一部分
private String id; id 属性
private String tagName; 表示标签名
private Dom parentNode; 父亲节电
private List<Dom> children; 孩子结点
private String innerHTML; 起始标签和结束标签中间的内容
节点常用的属性和方法：
节点就是标签对象
方法：
通过具体的元素节点调用
getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
属性：
childNodes
属性，获取当前节点的所子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的 class 属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本
*/
</script>
</head>
<body>
</body>
</html>
getElementById函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestGetElementByid</title>
<script type="text/javascript">
/*
getElementById函数:通过id属性获得标签属性
innerHTML属性：表示起始标签和结束标签中的内容，这个属性可读可写
patt对象：正则表达式
test()方法：用于测试某个字符是否匹配我的规则，是就返回true，否则返回false
*/
function fun() {
var usernameObj = document.getElementById("nameuser");
var usernameText = usernameObj.value;
var patt = /^\w{5,12}$/;
var spanobj = document.getElementById("span01");
// innerHTML表示起始标签和结束标签中的内容，这个属性可读可写
// var text = spanobj.innerHTML;
// spanobj.innerHTML = "小智真帅";
if (patt.test(usernameText)){
// alert("您的输入不合法")
spanobj.innerHTML="<img src=\"right.png\" height=\"18\" width=\"18\">";
}else{
// alert("您的输入不合法")
spanobj.innerHTML="<img src=\"wrong.png\" height=\"18\" width=\"18\">";
}
}
</script>
</head>
<body>
用户名<input type="text" id="nameuser" value="zxcv"/>
<span id="span01" style="color: red">
</span>
<button onclick="fun()">校验</button>
</body>
</html>
getElenmentByName函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestGetElementByName</title>
<script type="text/javascript">
/*
getElemenByName函数:通过name属性获取标签对象
// document.getElementsByName();是根据指定的name 属性查询返回多个标签对象集合
这个集合操作和数组一样，集合的每个元素都是 dom对象
// checked 表示复框的中状态。如果中是true，不中是false
// checked 这个属性可读，可写
*/
// 全
function butfunAll() {
// 需求：让所有复选框都选中
// 这个集合中的元素顺序是他们在html 页面中从上到下的顺序
// checked 表示复框的中状态。如果中是true，不中是false
// checked 这个属性可读，可写
//1.通过name属性获得标签对象集合
var getName = document.getElementsByName("hoby");
//2.通过checked属性修改中状态
//遍历
for (var i = 0; i < getName.length; i++){
getName[i].checked = true;
}
}
// 全不
function butfunNot() {
var getName = document.getElementsByName("hoby");
for (var i = 0; i < getName.length; i++) {
getName[i].checked = false;
}
}
// 反
function bufunfx() {
var getName = document.getElementsByName("hoby");
for (var i = 0; i < getName.length; i++) {
getName[i].checked = !getName[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好
<input type="checkbox" name="hoby" value="java" checked="checked"/>
<input type="checkbox" name="hoby" value="c++"/>
<input type="checkbox" name="hoby" value="c"/>
<input type="checkbox" name="hoby" value="python"/>
<br>
<button onclick="butfunAll()">全</button>
<button onclick="butfunNot()">全不</button>
<button onclick="bufunfx()">反</button>
</body>
</html>
getElenmentTagName函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
/*
getElementsByTagName：通过标签名获得标签对象
也是得到一个集合，操作和Name属性的方法类似
*/
//全
function butfunAll() {
// 1.得到标签对象
var inputobj = document.getElementsByTagName("input");
// 通过checked属性修改项状态
for (var i = 0; i < inputobj.length; i++) {
inputobj[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好
<input type="checkbox" name="hoby" value="java" checked="checked"/>
<input type="checkbox" name="hoby" value="c++"/>
<input type="checkbox" name="hoby" value="c"/>
<input type="checkbox" name="hoby" value="python"/>
<br>
<button onclick="butfunAll()">全</button>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test正则表达式</title>
<script type="text/javascript">
/*
正则表达式： -- 检索的时候要想到正则表达式来进行判断
写法：①new RegExg() 创建对象的形式
②/正则表达式主体/修饰符(可)
注意：①空格也是字符
②是大小写之分的
③包含是包含这个情况在里面的，比如说包含一个a，那就是说3个a也是成立的
*/
/*
//是否带小数
function isDecimal(strValue ) {
var objRegExp= /^\d+\.\d+$/;
return objRegExp.test(strValue);
}
//校验是否中文名称组成
function ischina(str) {
var reg=/^[\u4E00-\u9FA5]{2,4}$/; //定义验证表达式
return reg.test(str); //进行验证
}
//校验是否全由8位数字组成
function isStudentNo(str) {
var reg=/^[0-9]{8}$/; //定义验证表达式
return reg.test(str); //进行验证
}
//校验电话码格式
function isTelCode(str) {
var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
return reg.test(str);
}
//校验邮件地址是否合法
function IsEmail(str) {
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
*/
//代码实现
//判断字符串中是否包含这个字符,顺序要一样
//var patt = /de/;
//判断字符串中是包含a,c,d，顺序无要求
//var patt = /[acd]/;
//字符串中是否包含a到z的字母
//var patt = /[a-z]/;
//字符串中是否包含A到Z的字母
//var patt = /[A-Z]/;
//字符串中是否包含0-9的数字
//var patt2 = /[0-9]/;
//字符串中是否 包含 字母，数字，下划线
//var patt2 = /\w/;
//字符串中是否 包含 至少一个a
//var patt2 = /a+/;
//字符串中至少 包含 “零个” 或 多个 a
//var patt2 = /a*/;
//字符串中是否 包含 一个或者零个a
//var patt2 = /a?/;
//字符串中是否包含3个连续的a
//var patt2 = /a{3}/;
//字符串中是否 包含 至少3个连续的a ，最多5个连续的a
//var patt2 = /a{3,5}/;
//字符串中是否 包含 至少3个连续的a
//var patt2 = /a{3,}/;
//字符串中是否以a字母结尾
//var patt2 = /a$/;
//字符串中是否以a字母开头
//var patt2 = /^a/
//要求：字符串中是否*包含* 至少3个连续的a
//var patt2 = /a{3,}/;
//要求:字符串，从头到尾都必须完全匹配
//var patt3 = /^a{3,}$/; //以a开头和结尾，三个连续或多个连续的a，这是一段连续的字符串
//里面的内容全部是a才行
//alert(patt.test("abcde"))
//alert(patt2.test("aeasfaaa23a"))
//alert(patt3.test("aaaabba"))
// 要求：比对密码是数字、字母、下划线
var patt = /^\w{5,12}$/;
var str = "xiaozhi520_"
alert(patt.test(str))
</script>
</head>
<body>
</body>
</html>
createElement函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
/*
createElement函数：创建标签对象
*/
window.onload = function () {
var divobj = document.createElement("div"); //在内存中
//通过innerHTML属性写入内容
var textContent = document.createTextNode("智哥真帅"); //创建一个文本节点
var appendChild = divobj.appendChild(textContent); //添加一个子节点
document.body.appendChild(divobj); //添加一个子节点
}
</script>
</head>
<body>
</body>
</html>
2817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
