JavaWeb--JavaScript

最新推荐文章于 2024-03-26 00:07:23 发布

Fangxu_S

最新推荐文章于 2024-03-26 00:07:23 发布

阅读量353

点赞数

分类专栏： Javaweb 文章标签： js javascript java dom 脚本语言

本文链接：https://blog.csdn.net/weixin_45636142/article/details/116126288

版权

Javaweb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript

最初主要是为了完成页面的验证，运行在客户端，需要浏览器来解析执行代码
js弱类型类型可变
java是强类型类型确定不可变
交互性信息的动态交互
安全性不允许直接访问本地硬盘
跨平台性只要是可以解释js的浏览器都可以执行和平台无关

1.书写规范

用script标签书写JavaScript代码

2.引用方式

写在一个js文件里通过script标签 src 属性可以是相对路径也可以是绝对路径引用js文件
一个script标签不能同时引用和书写运行js代码

3.变量

JavaScript的变量类型
数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
JavaScript中特殊的值
underfined:未定义，所有js变量未赋值于初始值的时候，默认值都是undefined
null 空值
NAN 全称是：NOT a Number。非数字非数值
JavaScript中的定义变量格式
var 变量名 =值；
typeof()返回JavaScript中的变量数据类型

在JavaScript中，使用一个变量之前应当先声明，这点和Java是一致的，不同点是JS是弱类型脚本语言，所以所有的变量都是使用关键字var来声明的，具体如下：

var i;
var sum;
//也可通过一个var关键字声明多个变量
var i,sum;
//还可以将变量的初始赋值和变量声明结合在一起
var msg = "hello";
var i=0,name="Jack";

变量基本数据类型和Java类似，有字符串（string）、数值型（number）、布尔类型（boolean）、空（null）、未定义（undefined）、对象（object）等，它是由变量初始赋值决定的，通常使用typeof关键字查看变量的类型。

var person;
var car=null;
var name="Jack";
var age = 10;
var flag = false;
var obj = {cardno:100,score:98.5};
console.log("person类型：" + typeof person);
console.log("car类型：" + typeof car);
console.log("name类型：" + typeof name);
console.log("age类型：" + typeof age);
console.log("flag类型：" + typeof flag);
console.log("obj类型：" + typeof obj);

变量作用域有两种：
- 局部变量：在函数内（包括函数参数）定义，只能在函数内调用；
- 全局变量：在函数外定义，可以在js的任何地方调用；
- 优先级：局部变量>全局变量，如果定义相同变量，全局变量无效

var name = "Jack";
console.log(name);
// console.log(age);

/**
* 测试变量作用范围
*/
function test1(){
    var age = 10;
    name = "Jhon";
    console.log(name + "====" + age);
}

/**
* 测试变量优先级
*/
function test2(){
    var name = "Lucy";
    console.log(name);
}

4.运算符

运算符是在表达式中用于进行运算的符号，例如运算符“=”用于赋值、运算符“+”用于把数值加起来，使用运算符可进行算术、赋值、比较、逻辑等各种运算。

1.算数运算符

算术运算符用于各类数值之间的运算，JavaScript的算术运算符包括加（+）、减（-）、乘（*）、除（/）、求余（%）、自增（++）、自减（–）共7种。算术运算符是比较简单的运算符，也是在实际操作中经常用到的操作符。

符号	说明	示例
+	相加	var a=20,b=15;console.log(a+b);
-	相减	var a=20,b=15;console.log(a-b);
*	相乘	var a=20,b=15;console.log(a*b);
/	相除	var a=20,b=15;console.log(a/b);
%	求余	var a=20,b=15;console.log(a%b);
++	自增	var a=20,b=15;console.log(a++);console.log(++b);
–	自减	var a=20,b=15;console.log(a–);console.log(–b);

==说明：==算术运算符中需要注意自增与自减运算符。如果++或–运算符在变量后面，执行的顺序为“先赋值后运算”；如果++或–运算符在变量前面，执行顺序则为“先运算后赋值”。

2.赋值运算符

赋值运算符是将一个值赋给另一个变量或表达式的符号。最基本的赋值运算符为“=”，主要用于将运算符右边的操作数的值赋给左边的操作数。

符号	说明	示例
=	最基本赋值，将右边的操作数赋值给变量	var a;a=20; console.log(a);
+=	加等，先将两个操作数相加，再将结果赋值给变量	a+=10;console.log(a);
-=	减等，先将两个操作数相减，再将结果赋值给变量	a-=10;console.log(a);
*=	乘等，先将两个操作数相乘，再将结果赋值给变量	a*=10;console.log(a);
/=	除等，先将两个操作数相除，再将结果赋值给变量	a/10;console.log(a);
%=	余等，先将两个操作数求余，再将结果赋值给变量	a%10;console.log(a);

比较运算符

比较运算符在逻辑语句中使用，用于连接操作数组成比较表达式，并对操作符两边的操作数进行比较，其结果为逻辑值true或false。

符号	说明	示例
==	比较两个操作数的值是否相等。	var param = 15; console.log(param == 15);
===	比较两个操作数的值和类型是否都相等	var param = ‘15’;console.log(param===15);
!=	比较左边操作数是否不等于右边操作数	var param = 15;console.log(param != 15);
>	比较左边操作数是否大于右边操作数	var param = 15;console.log(param > 15);
>=	比较左边操作数是否大于等于右边操作数	var param = 15;console.log(param >=15);
<	比较左边操作数是否小于右边操作数	var param = 15;console.log(param <15);
<=	比较左边操作数是否小于等于右边操作数	var param = 15;console.log(param <= 15);

4 逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑，操作数一般是逻辑型数据。在JavaScript中，逻辑运算符包含逻辑与（&&）、逻辑或（||）、逻辑非（!）等。

符号	说明	示例
“&&”	等同于Java中的and，条件必须同时满足，才会返回true，只要一个不满足，则返回false	var age = 20;console.log(‘年龄是否在10到20岁之间呢？’ + (age>=10&&age<20));
“\|\|”	等同于Java中的or，条件只需要满足其中一个，就会返回true	var age = 20;console.log(‘年龄是否大于20岁或者等于20岁呢？’ + (age>20&&age==20));
“!”	条件不满足时，返回true	var age = 20;console.log(‘年龄是否不等于20岁呢？’ + (age != 20));
条件运算符	逻辑表达式?语句1:语句2，等同于if…else…（三元运算符）	var age = 20; console.log(age==20?true:false);

与java对比

==比较字面值如：var a=1；var b=“1”；a == b true；

===

除了字面值的比较之外，还会比较两个变量的数据类型 a===b flase

逻辑运算符

所有的变量都可以作为一个boolean类型的变量来用

0，null,underfined,空串都认为是false

&& 且运算

当表达式全为真的时候，返回最后一个表达式的值

当表达式有一个为假的时候，返回第一个为假的表达式的值

||或预算

当表达式全为假的时候，返回最后一个表达式的值

当表达式有一个为真的时候，返回第一个为真的表达式的值

5.数组

var 数组名=[]；//空数组
//数组元素可以为不同类型
//JavaScript只要通过数组下标赋值，数组会自动扩容
var arr=[];
		arr[0]=12;
		alert(arr.length);//1
//定义数组时有初始值仍然会自动扩容
var arr2=[1];
//按索引赋值会覆盖初始值
    arr2[0]=2;
    alert(arr2.length);//1
		arr2[1]=12;
		alert(arr2.length);//2
for(var i=0;i<arr2.length;i++){
			document.write(arr[i])
		}

6.函数

1.定义函数

function

//第一种
//无参
function fun(){
			alert("无参函数")
		}
//有参
function fun2(a,b){
			alert("有参函数"+a+b);
		}
		fun2(1,2);
//第二种
var fun4 = function(){
			alert("无参函数")
		}
		fun4();

在JavaScript语言中，如何定义带有返回值的函数
只需要在函数体内直接使用return语句返回值即可

function fun3(num1,num2){
  var sum = num1 + num2;
  return sum;
}
alert(fun3(100,50));

JavaScript不允许函数重载，重载会覆盖原函数

函数的argument隐形函数（只在function函数内）

不需要定义但却可以直接用来获取所有参数的变量，叫做隐形函数

类似于Java基础的可变长参数一样

function fun(){
		       alert(arguments.length);//查看参数个数
		       alert(arguments[0]);//获取参数值
		        for(var i=0;i<arguments.length;i++){
					alert(arguments[i]);
				}
					alert("无参函数")
				}
				fun(1,2);

//不用调用立即执行的方法
(function(){
					console.log("立即执行")
				})();

例子传参求和

function fun(){
					var result=0;
					for(var i=0; i<arguments.length;i++){
						if(typeof(arguments[i]=="number")){
							result+=arguments[i];
						}
						
					}
					alert(result);
				}
				fun(1,2,3,4,5);

this关键字：

在面向对象语言中的this表示当前对象的一个引用，但在JS中this不是固定不变的，它会随着执行环境的改变而改变，具体如下：

//1、在方法中，this表示该方法所属的对象
var user = {
    name : 'Jack',
    age : 20,
    info:function(){
        return this;
    }
}
console.log(user == user.info());

//2、如果单独使用，this表示全局对象
var a = this;
console.log(a == window);
//3、在函数中，this表示全局对象
function test(){
    return this;
}
console.log(test() == window);
//4、在事件中，this表示接收事件的元素
<input type="button" value="点我" onclick="javascript:console.log(this);" />

内置常规函数

isNaN()：用户检查其参数是否非数值值，如果是非数值返回true，否则返回false，具体如下：

var val = "10";
console.log(isNaN(val));

parseInt()：格式化整型，具体如下：

var val = "10";
console.log(typeof val);
console.log(parseInt(val));
console.log(typeof val);

parseFloat()：格式化为浮点型，具体如下：

var val = "10.5";
console.log(typeof val);
console.log(parseFloat(val));
console.log(typeof val);

7.自定义对象

1.Object 形式的自定义对象

//var 变量名 = new Object();  空对象
//变量名.属性名=值；  定义一个属性
//变量名.函数名= function(){}  定义一个函数
//对象的访问   变量名.属性/函数名
var obj= new Object();
obj.name = "华子";
obj.age = 18;
obj.fun = function(){
  alert(this.name+this.age);
}
obj.fun();

2.｛｝花括号形式的自定义对象

var obj= ｛
name : "华子";
age : 18;
fun : function(){
  alert(this.name+this.age);
}
};
obj.fun();

8.事件

1.常用事件

事件被理解为是JavaScript侦测到的行为，当触发这些行为时，可以调用自定义函数来完成用户交互。事件通常与函数配合使用，当事件发生时去调用函数，常见的事件如下：

类型	事件	说明
鼠标键盘事件	onclick	鼠标单击时触发
	ondblclick	鼠标双击时触发
	onmousedown	按下鼠标时触发
	onmouseup	按下鼠标松开时触发
	onmouseover	鼠标悬浮到对象上方时触发
	onmouseout	鼠标离开对象时触发
	onkeypress	键盘被按下并且释放时触发
	onkeydown	键盘被按下时触发
页面相关事件	onload	页面加载完成后触发
	onresize	浏览器窗口大小发生改变时触发
表单相关	onblur	元素失去焦点时触发
	onfocus	元素获取焦点时触发
	onchange	元素内容发生改变时触发
	onsubmit	提交表单时触发

onload 加载完成事件页面加载完成之后
onclick 单击事件；常用于按钮的点击响应操作
onblur 失去焦点事件离开输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件常用于表单提交时，验证所有表单项是否合法
单击事件：点击按钮改变背景颜色

<script>
			function changeBg(){
				var rgb = prompt('请输入颜色值：');
				document.body.style.backgroundColor = rgb;
			}
</script>

简单表单校验

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>表单校验</title>
       <script>
           //清空文本框
           function getFocus(){
               document.getElementById('username').value = '';
           }
           
           //检查是否为空
           function checkVal(val){
               if(val.value == ''){
                   document.getElementById('msg').innerHTML = '用户名不能为空！';
               }else{
				   document.getElementById('msg').innerHTML = '';
			   }
           }
           
           function changeVal(){
               console.log(document.getElementById('username').value);
           }
       </script>
    </head>
    <body>
        用户名：<input type="text" value="请输入用户名" id="username" onfocus="getFocus()" onblur="checkVal(this)" />
        <div id="msg"></div>
    </body>
</html>

2.正则表达式

正则表达式（Regular Expression，简称RegExp）是一种描述字符串结构的语法规则，是一种特定的格式化模式，用于校验各种字符串是否匹配这个特征，在项目中经常会利用正则表达式进行表单验证等功能。

语法：/^表达式主体$/

元字符
- [a-z]：匹配小写字母a-z任意字符
- [A-Z]：匹配大写字母A-Z任意字符
- \d：匹配数字字符，等效于[0-9]
- \D：匹配任意非数字字符
- \w：匹配任何英文字符、数字和下划线，等效于[a-zA-Z0-9_]
- \W：匹配任何非英文字符、数字，但不包括下划线的
- \s：匹配任何空白字符，如空格、制表符等
- \S：匹配任何非空白字符
- .：匹配除换行符\n之外的任何单字符
表达式
- [abc]：查找方括号内的任意字符
- [0-9]：查找任何从0~9的字符
- (x|y)：查找任何以|分隔的选项
量词
- {n}：出现n次
- {n,}：至少出现n次
- {n,m}：至少出现n次，最多出现m次
- n+：出现1次或多次，等效于{1,}
- n*：出现0次或多次，等效于{0,}
- n?：出现0次或1次，等效于{0,1}
常用表达式
1. 身份证号校验：/^\d{15}|\d{17}[0-9Xx]$/
2. 邮箱校验：/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/
3. 手机号校验：/^1(3|4|5|6|7|8|9)\d{9}$/
4. QQ校验：/¹\d{4,8}$/
5. 中文校验：/²+$/
6. 邮政编码：/^\d{6}$/

用法：

var reg =/^[1-9]\d{4,8}$/;
console.log(reg.test(1234));

页面显示九九乘法表

//遍历所有行
for(var i = 1; i < 10; i++){
//遍历所有列
	for(var j = 1; j <= i; j++){
		document.write(i + '*' + j + '=' + i*j + '&nbsp;&nbsp;');
	}
	document.write('<br/>')
}

3.事件的注册

事件的注册分为动态注册和静态注册

其实就是告诉浏览器，当时间响应后要执行那些操作代码，叫时间注册或者事件绑定

静态注册

在html中让事件调用方法
<input type="text" onblur="function()"/>

通过HTML标签的事件属性直接赋予事件响应后的代码叫做静态绑定

动态注册

在js代码中
window.onload =function(){
  //获取标签对象
  let obj = document.getElementById("id1");
  //通过标签对象.事件名=function()
  obj.onblur = function(){
    alert("动态注册事件")；
  }
}

通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function()这种形式赋予事件响应的代码，叫做动态注册

动态注册基本步骤

1.获取时间对象 2.标签对象.事件名 = function(){}

4.弹窗

alert()：提示弹框

alert('你出错了！');

prompt()：带文本框的弹框

var msg = prompt('请输入数字');
console.log(msg);

confirm()：带确认按钮的弹框

var btn = confirm('是否确认？');
if(btn){
    console.log('你点击了确认按钮！')
}else{
    console.log('你点击了取消按钮！')
}

open(url,name,specs)：打开新窗口

/**
* 参数说明
* url：打开指定页面的URL地址
* name：指定target属性或窗口的名称
* specs：设置浏览器窗口的特征（如大小、位置、滚动条等），多个特征之间用,隔开
*/
window.open("http://www.baidu.com","blank","width=400,height=300");

close()：关闭窗口

var win = window.open("http://www.baidu.com","_blank");
win.close();

5.history对象

BOM中history对象提供的方法，可以对用户在浏览器中访问过的URL历史记录进行操作，来实现浏览器的“后退”和“前进”功能。

window.go(n); //跳转某个具体页面
//当n<0时，向后跳转n个页面
//当n>0时，向前跳转n个页面
//当n==0时，等同于location.reload();
// 当n==-1时，等同于history.back();
//当n==1时，等同于history.foward();
//注：可通过history.length，返回历史列表中的网址数

6. location对象

BOM中location对象提供的方法，可以更改当前用户在浏览器中访问的URL，实现网页的跳转和刷新等功能。

常用的方法和属性：

//跳转新页面
location.href = "http://www.baidu.com";
//刷新当前页面
location.reload();

7. 定时器

JavaScript可以通过window对象提供的方法实现在指定时间后执行特定操作，也可以让代码每隔一段时间执行一次，实现间歇操作，具体如下表：

方法	说明
setTimeout()	在指定的毫秒后调用函数或执行一段代码
setInterval()	按照指定的周期（以毫秒为单位）来调用函数或执行一段代码
clearTimeout()	取消由setTimeout()方法设置的定时器
clearInterval()	取消由setInterval()方法设置的定时器

<script>
	var timer = null;
	function openTimer(){
		var num = 1;
		timer = setInterval(function(){
			console.log(num++);
		},1000)
	}		
	function closeTimer(){
		clearInterval(timer);
	}		
	var tasker = null;
	function openTasker(){
		var num = 1;
		setTimeout(function(){
			console.log(num);
		},1000)
	}
			
	function closeTasker(){
		clearTimeout(timer);
	}
</script>
<input type="button" value="启动定时" onclick="openTimer()" /><br/><br/>
<input type="button" value="关闭定时" onclick="closeTimer()" /><br/><br/>
<input type="button" value="启动任务" onclick="openTasker()" /><br/><br/>
<input type="button" value="关闭任务" onclick="closeTasker()" /><br/><br/>

页面10秒后重新加载

setTimeout(function(){
    location.reload();
},1000*10);

浏览器控制台每隔5秒输出“你好，尚马教育”

setInterval(function(){
    console.log("你好，尚马教育");
},1000*5);

9.Document

1.Document对象方法

Document管理了所有的HTML文档内容
是一种树结构的文档，有层级关系
他让我们把所有标签都对象化
我们可以通过document访问所有的标签对象
获取元素
- document.getElementById()：返回拥有指定id的对象
- document.getElementsByName()：返回拥有指定name的对象集合
- document.getElementsByTagName()：返回带有指定标签名的对象集合
- document.geElementsByClassName()：返回带有指定类名的对象集合
- document.body：返回文档的body元素
元素内容

JavaScript中，若要对获取元素的元素内容进行操作，可以利用DOM提供的属性和方法实现，常用的如下：
- innerHTML：设置或返回元素开始和结束标签之间的HTML
- innerText：设置或返回元素开始和结束标签之间的内容
- value：设置或返回元素的value属性值
- document.write()：向文档写入指定的内容
- document.writelin()：向文档写入指定的内容后并换行
元素属性
- attributes：返回一个元素的属性集合
- setAttribute(name,value)：设置或者改变指定属性的值
- getAttribute(name)：返回指定元素的属性值
- removeAttribute(name)：从元素中删除指定的属性

<script>
	var box = document.getElementById("box");
    //获取属性个数
    console.log(box.attributes.length);
    //设置属性值
    box.setAttribute("align","center");
    box.setAttribute("class","box2");
    //获取属性值
   	console.log(box.getAttribute("class"));
    //移除属性值
    box.removeAttribute("class");
</script>

document.getEelementById(elementId)
//通过标签的id属性查找标签dom对象，elementId是标签的id属性
document.getElementsByName(elementName)
//通过标签的name属性查找标签dom对象，elementName标签的name属性值
document.getElementsByTagName(tagname)
//通过标签名查找标签dom对象，tagname是标签名
document.createElement(tagName)
//方法，通过给定的标签名：创建一个标签对象，tagName是要创建的标签名

使用的优先顺序

byid byname bytagname

2.节点

获取节点
- firstChild：返回当前节点的首个子节点
- lastChild：返回当前节点的最后一个子节点
- parentNode：返回当前节点的父节点
- childNodes：返回当前节点的所有子节点集合
- nodeName：返回当前节点名称
- nodeValue：返回当前节点的值
- nextSibling：返回同一层级中指定节点后一个节点
- previousSibling：返回同一层级中指定节点前一个节点
节点追加
- document.createElement()：创建元素节点，传递参数为标签名称
- appendChild()：追加子元素，传递参数为创建的元素
- insertBefore()：在xx元素之前添加，传递参数为1、创建的元素 2、追加前的元素
- cloneNode（）：复制元素，参数true或false
- removeChild()：删除子元素

节点常用属性和方法

节点就是标签对象（包括注释）

document.getElementsByTagName(tagname)
//获取当前节点的指定标签名孩子节点
appendChild(oChildNode)
//可以添加一个子节点 oChildNode是要添加的孩子节点
childNodes
//属性，获取当前节点的所有子节点
firstChild
//属性，获取当前节点的第一个字节点
lastChild
//属性，获取当前节点的最后一个子节点
parentNode
//属性。获取当前节点的父亲节点
nextSibling
//属性，获取当前节点的下一个节点
previousSibling
//属性，获取当前节点的上一个节点
className
//用于获取/设置标签的class属性值
innerHTML
//属性，表示获取或设置起始标签和结束标签中的内容
innerText
//属性，表示获取/设置起始标签和结束标签中的文本

3.DOM表格对象

常见属性和方法：

rows：所有行集合
rows.length：行数
cells：某一行的所有列集合
cells.length：列数
insertRow()：插入行
insertCell()：插入列
deleteRow()：删除行

//盒子改变大小
<script>
			var i = 0;
			function change() {
				var box = document.getElementById("box");
				++i;
				if (i % 2) {
                    box.innerHTML = "变大";
					box.style.width = '200px';
					box.style.height = '200px';
				} else {
                    box.innerHTML = "变小";
					box.style.width = '50px';
					box.style.height = '50px';
				}
			}
		</script>
	</head>
	<body>
		<div id="box" onclick="change()"></div>
</body>

4.常见对象

1.字符串对象

indexOf()：获取某个字符第一次出现的位置
lastIndexOf()：获取某个字符最后一次出现的位置
split()：分割字符串
substring()：截取字符串从n到m之间的新字符串
substr()：截取字符串从n开始后包含m个字符的新字符串
toUpperCase()：全部大写
toLowerCase()：全部小写

2 .Math对象

ceil()：向上取整
floor()：向下取整
round()：四舍五入
random()：从0到1的随机数

3 .日期对象

通过new Date()创建日期对象
getFullYear()：获取日期对象的年份，其值为4位数
getMonth()：获取日期对象的月份，取值范围0-11
getDate()：获取日期对象的具体某一天，取值范围1-31
getHours()：获取日期对象的具体小时，取值范围0-23
getMinutes()：获取日期对象的具体分钟，取值范围0-59
getSeconds()：获取日期对象的具体秒数，取值范围0-59
getDay()：获取日期对象星期几，取值范围为0-6

4. 数组对象

通过new Array()创建数组对象，可以规定数组大小
length：数组的长度
push()：从数组尾部追加元素
unshift()：从数组头部追加元素
sort()：对数组元素进行排序
shift()：从数组头部删除元素
pop()：从数组尾部删除元素

1-9 ↩︎
\u4e00-\u9fa5 ↩︎

Fangxu_S

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb--JavaScript

JavaScript最初主要是为了完成页面的验证，运行在客户端，需要浏览器来解析执行代码js弱类型类型可变java是强类型类型确定不可变交互性信息的动态交互安全性不允许直接访问本地硬盘跨平台性只要是可以解释js的浏览器都可以执行和平台无关1.书写规范用script标签书写JavaScript代码2.引用方式写在一个js文件里通过script标签 src 属性可以是相对路径也可以是绝对路径引用js文件一个script标签不能同时引用和书写运行js代码
复制链接

扫一扫