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>