java-web-javaScript部分

秃头泥猴

已于 2022-05-07 21:46:04 修改

阅读量1.6k

点赞数

分类专栏： java 文章标签： javascript 前端开发语言

于 2022-05-05 17:20:22 首次发布

本文链接：https://blog.csdn.net/leaarning/article/details/124592498

版权

java 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1. 什么是javaScript？

是一门跨平台，面向对象的脚本语言，来控制网页行为的，能使网页交互。

2.引入方式

内部脚本：将js代码定义在html页面当中，一般情况下是放在body底部。

<body>
<script>
</script>
</body>

外部脚本:将js代码定义在外部js文件中，然后引入到html页面中

引入方法: <script src=" js路径 "></script>

注意:外部脚本不能包含<script>标签

3.基础语法

输出语句

使用window.alert() 写入警告框

使用document.write（）写入html输出

使用console.log（）写入浏览器控制台

变量

用var关键字来声明，可以存放不同类型的值

特点:1.作用域：全局变量 2.变量可以重复定义

为了解决重复定义，用let关键字定义并且let的作用域只在所在的代码块内有效，且不允许重复声明

const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变。

数据类型

分为原始类型和引用类型

原始类型有：number(数字)，string（字符串，字符），boolean，null（对象为空），undefined（当声明的变量未初始化是，该变量默认值是undefined）

使用typeof运算符可以获取数据类型

object类型：

属性包括：prototype属性作用是给类动态的扩展属性和函数。

constructor属性

null,NaN,undefined这三个区别：null类型是obj类型，NaN类型是number，undefined类型是undefined 。但是null和undefined可以等同。

运算符

==和===区别：==会进行类型转换，而===不会进行类型转换

void（）运算符执行括号中的表达式，但不返回任何结果

案例：既保住超链接样式，同时用户点击该超链接的时候执行一段代码，但页面不能跳转

<a href="javascript:void(0)"onclick="sayello()">既保住超链接样式，同时用户点击该超链接的时候执行一段代码，但页面不能跳转</a>
	<script type="text/javascript">
	 function sayhello(){
		 alert("hello js");
	 }
	</script>

函数

也就是方法，是被设计为执行特定任务的代码块，通过关键字function进行定义，

语法格式为：

function functionName（参数1，参数2.....）{ 要执行的代码}

注意:1. 形式参数不要类型

2. 返回值也不需要定义类型，可以在函数内部直接使用return返回即可。

调用：函数名称

案例： function add（a，b）{return a+b；} let result=add（1,2）；

方式二：var add=function（a，b）{ return a+b；}

javascript对象

Array对象用于定义数组，定义方式：

var 变量名=new Array（元素列表）；或者 var 变量名=[ 元素列表 ]

访问方式:

arr[索引]=值

注意：js数组类似于java集合，长度，类型都可变。

array属性

length:数组的元素个数

array方法

push:添加方法

splice（a，b）删除元素删除a到b之间的元素不包括b

for ....in语句可以遍历对象的属性

js中常用事件

1.onblur 失去焦点 focus 获得焦点

2.change 下拉列表选中项改变，或文本框内容改变 select文本被选定 load页面加载完毕

3.click鼠标点击 dblclicks鼠标双击

4.keydown键盘按下 keyup键盘弹起

5.mousedown鼠标按下 mouseover鼠标经过 mousemove鼠标移动 mouseout鼠标离开 mouseup鼠标弹起

6.reset表单重置 subumit表单提交

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。

形式： on.xxx这个事件句柄出现在一个标签的属性位置上

注册事件的方式

1.直接在标签中使用事件句柄

	<input type="button" name="" id="" value="你好按钮"onclick="seyhello()" />
	<script type="text/javascript">
		function seyhello(){
			alert("hello");
		}
	</script>

把seyhello函数称为回调函数

2.用js代码完成注册事件

第一步：先获取这个按钮对象（document，内置对象可以直接用）

第二步：给按钮对象的onclick属性赋值

	<input type="button" name="" id="" value="你好按钮" />
	<script type="text/javascript">
		function seyhello(){
			alert("hello");
		}
		var demo=document.querySelector("input");
		demo.onclick=seyhello;
	</script>

DOM编程

案例：获取文本框中的value

	<input type="text" name="" id="username" value="" />
	<input type="button" name="" id="btn" value="确认" />
	<script type="text/javascript">
		var btn=document.getElementById('btn');
		btn.onclick=function(){
			var value=document.getElementById('username');
			alert(value.value);
		}
	</script>

innerHTML和innertext 属性

区别：相同点：都是设置元素内部的内容

不同点:innerHTML会把后面的“字符串”当做一段html代码注释并执行。

innertext，即使后面是一段html代码，也只是将其当做普通的字符串来看待

如图

正则表达式

1.正则表达式，有什么用？

主要用在字符串格式匹配，包括搜索方面

2. 常见的正则表达式符号

. 匹配出换行符意外的任意字符

\w 匹配字母或数字或下划线或汉字

\s匹配任意的空百符

\d匹配数字

\b匹配单词开始或结束

^匹配字符串的开始

$匹配字符串的结束

*重复0次或更多次

+重复一次或更多次

？重复0次或更多次

{n}重复n次

{n，}重复n次或更多次

{n,m}重复n到m次

3.简单的正则表达式

正则表达式当中小括号() 优先级最高

如：qq好的正则表达式： ^[1-9][0-9]{4,}$

4.如何创建正则表达式对象，怎么调用正则表达式对象方法

第一种方式创建:

var regExp=/正则表达式/flags；

第二种创建方式;
var regExp=new RegExp("正则表达式","flags")；

关于flags：

g:全局匹配

i：忽略大小写

m：多行搜索，当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以用。

正则表达式对象的test（）方法

true、false=正则表达式对象.test（用户填写的字符串）;

案例：邮箱匹配

		<input type="text" name="" id="email" value="" />
		<span id="messagetrue"style="color: #FF0000;font-size:12px;"></span><br>
		<input type="button" name="" id="btn" value="验证邮箱" />
		<script type="text/javascript">
		window.onload=function(){
		var btn=document.getElementById('btn');
		btn.onclick=function(){
		
			var emali=document.getElementById("email").value;			
			var emaliRegxp=/^\w+([-+.]\w+)*@\w+([-.]\w)*\.\w+([-.]\w+)*$/;
			var ok=emaliRegxp.test(emali);
			if(ok){
				// document.getElementById("messagetrue").innerText="邮箱地址合法";
				var ok=document.getElementById("messagetrue");
				ok.innerText="邮箱地址合法";
			}else{
			// document.getElementById("messagetrue").innerText="邮箱地址不合法";
		var ok=document.getElementById("messagetrue");
			ok.innerText="邮箱地址不合法";
			}
		}
			
			// document.getElementById("messagetrue").onfocus=function(){
			// document.getElementById("messagetrue").innerText="";
		var text=document.getElementById("email");
		text.onfocus=function(){
			document.getElementById("messagetrue").innerText="";
		}
		}
		</script>

去除前后空白trim（）