javascript可以后端吗 javascript能写后端吗

转载

陌陌香阁 2023-09-01 15:19:28

文章标签 javascript可以后端吗 java javascript 正则表达式后端 文章分类 JavaScript 前端开发

JS学习

1.什么是JavaScript，有什么用？

答：JavaScript是网景公司发明的，运行在浏览器上的脚本语言，简称JS。
补充：网景公司现在没了，被美国在线收购了。

2.在HTML中嵌入JavaScript代码的三种方式

在标签中直接加入事件句柄引入

<input type="button" value="这是一个弹窗" onclick="window.alert('hello');
                                                 window.alert('你好!')">

脚本块

<script type="text/javascript">
 window.alert("first");
 window.alert("Hi~");
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.alert("Head");
        window.alert("Hi~");
    </script>
</head>
<body>
    <script type="text/javascript">
        /*
           暴露在脚本块当中的程序，在页面打开的时候执行，并且
           遵守自上而下的顺序依次逐行执行(这个代码执行不需要事件)
        * */
        window.alert("Hello World!");
        window.alert("Hi~");
    </script>
    <input type="button" value="我是一个按钮">
</body>
</html>

注意：JavaScript的脚本块在一个页面当中可以出现多次，没有要求。

JavaScript的脚本块出现的位置也没有要求，随意。

alert有阻挡页面加载的作用。

引入JS文件
在需要的位置引入js脚本文件
引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行
同一个js文件可以被引入多次，实际开发中这种需求很少。
格式：<script type="text/javascript" src="js文件"></script>注意：

这种引入格式是错误的<script type="text/javascript" src="1.js"/>
<script type="text/javascript" src="js文件">代码1</script>代码1不会被执行。

3. 标识符

标识符可以标识变量名、属性名、数组名、函数名等。
第一个字符必须是字母、下划线或美元符号，其他字符可以使用字母、数字、下划线或美元符号。
标识符不能和JavaScript的关键字同名。
JavaScript中标识符是区分大小写的。

4. 变量

JavaScript是一门弱类型语言，不像Java语言在程序编译阶段就确定变量的数据类型。例如int age = 10;在程序编译阶段age变量的类型就被确定为int类型。但是JavaScrip是不需要编译的，直接解释执行，所以在编写JavaScript程序的时候不需要指定变量的类型，程序运行期确定变量的类型。在JavaScript中定义变量使用如下语法：

var 变量名[=初始化值]
var表示动态数据类型，当程序执行上面这行代码的时候才会确定这个变量的具体类型。如果变量没初始化，打印出来的值就是undefined，表示为未定义的，类似Java的null。
全局变量的声明

使用var关键字+变量名在函数外部声明的就是全局变量:

var b = "张三";

没有使用var关键字声明，直接给变量名赋值，不管是在函数内部还是外部都是全局变量：

text = "全局变量";
 
		function bl() {
			text1 = "我也是全局变量";
			var text2 = "我是局部变量";
			console.log(text2); //局部变量只能在函数中使用
		}
 
		bl() //结果：我是局部变量
 
		console.log(text); //结果：全局变量
		console.log(text1); //结果：我也是全局变量
		//console.log(text2); //局部变量，在函数外使用会报错

使用window全局对象来声明，全局对象的属性对应也是全局变量：

window.test3 = 'window全局对象声明全局变量';
 
console.log(test3);//结果：window全局对象声明全局变量

局部变量的声明

一定要使用var关键字。因为在使用var关键字声明变量时，变量会自动添加到距离最近的可用环境中。

function bl() {
			text1 = "我是全局变量";//没有使用var 为全局变量
			var text2 = "我是局部变量";
			console.log(text2); //局部变量只能在函数中使用
        }

注意：使用var创建的变量不能使用delete释放内存，其他方式创建的变量可以使用delete释放内存。

5. 函数

函数function类似于Java语言中的方法Method，也是一段可以完成特定功能的代码片段，并且这段代码片段是可以重复利用的。在JavaScript中定义函数的语法：

函数类似Java中的方法，也可以有返回值，有参数可以被调用，不调用不执行。
			有两种定义语法：
				1. function 函数名(参数列表){
					函数体
				}
				2. var 函数名 = function(参数列表){
					函数体
				}
				第二种是使用一个匿名函数将函数的引用赋值给一个变量，这个变量名就相当于函数的名字。

函数的调用

函数名(实参列表)
var 返回值 = 函数名(实参列表)(有返回值的情况)

例子：

function a(){
					alert("这是a函数");
				}
				a();
				function b(a, b){
					alert("参数a = " + a + " 参数b = " + b);
				}
				b(); // 输出：参数a = undefined 参数b = undefined，自动传的默认值。
				b(100); // 只给a赋值
				b(100, 200); // 给a和b都赋值
				
				function c(a, b){
					var  c  = a + b;
					return c;
				}
				alert(c(100, 200));

注意：

JS是弱类型语言，因此函数不需要指定返回类型。如果函数需要返回数据，直接使用return 数据即可返回。
JS是弱类型语言，因此函数的形参列表不需要指定参数类型，只写参数名即可。

6. 数据类型

JavaScript中有5种数据类型：4种原始类型(基本数据类型)Undefined、Boolean、Number、String。一种引用数据类型——Object，自定义的函数也是一种引用数据类型，可以看作Object类型的子类型。ES6规范中又添加了一种新的类型：Symbol。
JavaScript是松散类型的，因此需要有一种手段来检测给定变量的数据类型，typeof运算符就是负责提供这方面信息的操作符。对一个值使用typeof操作符可能返回下列某个字符串：

“undefined”——这个未定义
“boolean”——这个是布尔值
“string”——这个是字符串
“number”——这个是数值
“object”——这个是对象或null
“function”——这个是函数

typeof语法有三种写法

typeof 变量名
typeof(变量名)
typeof 函数名

typeof例子：

var  a ;
			document.write("a =  " + (typeof a) + "<br/>");
			var b = 100;
			document.write("b = " + (typeof b) + "<br/>");
			var c = 100.5;
			document.write("c = " + (typeof c) + "<br/>") ;
			var d = "100";
			document.write("d = " + (typeof d) + "<br/>") ;
			var e = null;
			document.write("e = " + (typeof e) + "<br/>") ;
			var g = true;
			document.write("g = " + (typeof g) + "<br/>") ;
			var h = function(){};
			document.write("h = " + (typeof h) + "<br/>") ;

打印出：
a = undefined
b = number
c = number
d = string
e = object
g = boolean
h = function

Boolean类型

该类型只有两个字面值：true或false。
要将一个值转换为其对应的Boolean值，可以调用类型转换函数Boolean()，其转换规则如下：

数据类型	转换为true值	转换为false值
Boolean	true	false
String	任何非空字符串	“”(空字符串)
Number	任何非零数字值(包括无穷大)	0和NaN(表示不是一个数字)
Object	任何对象	null
Undefined	x	undefined

if语句中会自动执行相应的Boolean转换。

var message = "helloworld";
if (message)
{
	xxxx
}

Number类型

该类型用来表示整数和浮点数值，以及NaN(非数值 Not a number)。这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(一般出现在一个非数值与一个数值作计算的时候)。
注意：NaN与任何数都不相等，包括它自己。
JavaScript中有一个isNaN()函数，这个函数接受一个参数，该参数可以是任何类型，而这个函数会帮我们确定这个参数是否"不是数值"。

通常用这个方法判断一个字符串是不是一个数字型的内容。如果是则可以进行计算或转型，如果不是数字则不能计算或转型，否则会出现NaN的情况。

类型转换

Number()
parseInt()
parseFloat()

第一个函数可以用于任何数据类型，而另外两个函数则专门用于把字符串转换成数值。
如果是Boolean值，true或false会被替换成1和0
如果是数字值，只是简单的传入和返回
Number在转换时如果字符串包含不能转换的字符时直接返回NaN
parseInt和ParseFloat在作转换的时候从字符串的左侧开始转换，直到遇到不能转换的字符结束转换并将之前转换后的数据返回。如果第一个字符就不能转换那么才返回NaN。
注意：也可以使用字符串*1的方式进行转换，它的转换规则和Number是一样的。

7. 自定义对象

创建对象语法格式：var 对象名 = new 构造方法();
创建类(所对应的构造方法)

语法格式：

function 类名(形参列表){
    this.属性名[=初始化值]; // 相当于定义了一个公共属性
    this.方法名 = function(形参列表){ // 相当于定义了一个公共方法
        方法体
    }
}
// 为什么说是公共的，因为在外部可以直接通过对象名.属性名/方法名去调用。

例子：

function User(name, age, address){
				this.name = name; 
				this.age = age;
				var address = address; // 私有属性
				this.show = function(){
					document.write("name = " + this.name + "    age = " + this.age + "<br/>");
					document.write("address = " + address + "<br/>");
				}
				this.getAd = function(){
					return address;
				}
				this.setAd = function(add){
					address = add; // 不能用this.address，因为address只是个局部变量不属于对象。
				}
			}
			var user = new User();
			user.show()
			
			
			user.name = "张三"
			user.age = 16
			user.setAd("上海")
			user.show()
			alert(user.getAd())
			
			var user2 = new User("李四", "14", "北京");
			user2.show()

注意：

this表示当前对象，this.属性名表示这个属性是当前对象的属性，操作属性的时候需要通过对象.属性名进行操作。
使用this定义的属性和方法都是公共的，如果使用var定义的方法和属性为私有那么只在当前类的内部可以使用。
如果使用var方法定义的属性是一个局部变量，不能使用this.来访问，因此如果需要使用构造方法或某个方法对这个属性赋值，那么形式参数名不能与该属性名重名，否则会根据就近原则，操作失败。

自定义对象扩展

借助prototype属性，每个对象都默认带有这个属性。

这个属性只能扩展this.的属性和方法(公共属性和公共方法)
扩展不能直接对已有的方法进行覆盖
扩展后任意个对象都能访问到扩展进去的内容

注意：在动态扩展的方法中不能直接调用类中的局部变量。如果非要访问局部变量只能通过调用提前写好的get和set方法。
例子：

function User(name, age){
				this.name = name;
				this.age = age;
				this.show = function(){
					document.write("name = " + this.name + " age = " + this.age + "<br/>");
				}
			}
			
			var usr = new User("张三", 16);
			var usr2 = new User("李四", "15");
			usr.show();
			usr2.show();
			
			User.prototype.location; // 添加属性location
			// 扩展后任意个对象都能访问到扩展后的内容
			usr.location = "北京";
			usr2.location = "上海";
/* 			User.prototype.show = function(){
				document.write("无用");
			} */ // 不允许去覆盖之前存在的方法
			// usr.show(); 无变化
			User.prototype.show2 = function(){
				document.write("name = " + this.name + " age = " + this.age + " location = " + this.location +"<br/>");
			}
			// 扩展后任意个对象都能访问到扩展后的内容
			usr.show2();
			usr2.show2();

8. void让超链接失效

javascript:void(0) 它让链接失效，然后配合事件可以让这个超链接拥有逻辑功能。比如下载前可以判断是否有权限或者积分
另外它不仅可以让超链接增加逻辑功能还可以隐藏地址和连接信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body> 
		<!-- # 表示转向到当前页面，它是真正的执行了转向的行为 -->
		<a href="#">点击我</a><br/>
		<!-- javascript:void(0) 它让链接失效，然后配合事件可以让这个超链接拥有逻辑功能
			比如下载前可以判断是否有权限或者积分 
			它不仅可以让超链接增加逻辑功能还可以隐藏地址和连接信息。
			-->
		<a href="javascript:void(0)">点击我</a>
	</body>
</html>

9. =、==、===的区别

=：赋值
==：比较2个变量的内容是否相等。值等：只是单纯地比较变量的内容，如果类型不同则转型以后再比较。
===：比较2个变量的内容是否相等。全等：它会先去比较类型是否一样，如果类型不一致则不继续向下比较，直接返回false，如果类型一致才继续比较。

10. for in

迭代控制语句

可以将一个对象中所有的属性名迭代出来(枚举出所有属性)

function User(name, age){
				this.name = name;
				this.age = age;
				this.show = function(){
					document.write("name = " + this.name + " age = " + this.age + "<br/>");
				}
			}
			var user = new User("张三", 23);
			// 迭代出当前对象中所有属性名
			// 我们可以利用对象名[属性名]的语法操作对象中的属性，如果需要操作方法要在语法的后面添加()例如对象名[属性名]()
			for (var temp in user){
				if (typeof user[temp] != 'function'){ // 判断当前属性的引用是否不是一个函数，进入if表示不是函数需要获取属性值
					alert(user[temp]);
				}else{ // 进入else表示当前属性是一个函数
					user[temp]();
				}
			}

可以迭代数组中的索引

var arr = ["张三", "李四", "王五", "赵六"];
			for (var idx in arr)
			{
				document.write(arr[idx] + "<br/>");
			}

一般不这么用，它可能会多输出些什么。

11. 数组

数组定义语法：

var arr =new Array(长度);// 初始化长度定义数组，数组中的元素默认值为undefined。
var arr = new Array(数据, 数据, 数据); // 初始化内容定义数组
var arr = [数据, 数据, 数据]; // 初始化内容定义数组

注意：

大部分操作与Java的数组是一样的，也是通过索引对元素进行操作。
JS是弱类型语言，因此它的数组中可以存放任意类型的数据。
JS中的数组的长度是不固定的可以自动地增加或者减少，访问数组时也不会出现索引越界的异常。
数组是顺序结构，即使JS的数组可以扩容但是也最好不要这么做。

遍历数组：

var arr = ["张三", "李四", "王五", "赵六"];
			for (var i = 0; i < arr.length; ++i)
			{
				document.write(arr[i] + "<br/>");
			}
			
			for (var idx in arr)
			{
				document.write(arr[idx] + "<br/>");
			}

一般不用第二种方式，常用第一种方式。

12. Date对象

创建范式

var date = new Date() 根据当前系统时间创建一个Date对象，注意它创建的是客户端机器中的时间对象。
var date = new Date(毫秒)根据一个毫秒创建一个时间，通常用来将Java的Date类型对象转换成JS的时间。

方法：

toLocaleString()返回一个日期，该日期使用当前区域设置并已被转换为字符串。
getYear()返回三位数的年，这个年要加上1900才是我们正常的年。
getFullYear()返回正常的年
getDay()获取星期，返回0~6，0代表星期日
getDate()获取今天是当月的第几天(1~31)
getHours()获取小时
getMinutes()获取分钟
getSeconds()获取秒数
getMonth()获取月份，返回0~11，正常来说要进行+1处理

13. 常用事件

click事件
鼠标单击事件，事件句柄：onclick
blur事件
失去焦点事件，事件句柄：onblur
change事件
当文本框、文本域中的文本内容发生变化并失去焦点时触发或者下拉列表中项发生改变时，该事件发生，事件句柄：onchange
load事件
页面加载完毕后触发，事件句柄：onload，通常写在body标签当中。
keydown事件
键盘按键被按下时发生，可以捕获所有键，除"prt sc sysrq"键之外，事件句柄：onkeydown。
keypress事件
键盘按键被按下时发生，主要用来捕获数字、字母、小键盘，其他键无法捕获，但是在FF浏览器当中可以捕获所有键。事件句柄：onkeypress。
keyup事件
键盘按键弹起时发生，事件句柄：onkeyup。
mousedown事件
鼠标按下事件(比起click事件它可以多监听鼠标右键的点击)，事件句柄：onmousedown。
mousemove事件
鼠标在某控件上移动时发生，事件句柄：onmousemove。
mouseover事件
鼠标经过某控件时发生，事件句柄：onmouseover
mouseout事件
鼠标离开某控件时发生，事件句柄：onmouseout

14. 事件绑定

以click事件为例：

直接在标签中进行事件绑定
<input type="button" value="点击我" onclick="myClick01()"/>
在JavaScript代码中进行事件绑定

// 注意：HTML跟JS都是解释性语言，因此根据id获取元素对象的方法必须要在这个元素被解析执行以后才能获取到
			// 获取id为myBut的元素对象
			var myButObj = document.getElementById("myBut");
			// document.write(typeof myButObj);
			// 为html元素对象的onclick属性进行赋值(绑定一个事件处理方法)
			myButObj.onclick = function(){
				alert("事件绑定方式2")
			};

以上两种方式完整测试代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		
			function myClick01(){
				alert("点击了按钮");
			}
		</script>
	</head>
	<body>
		<!-- οnclick="myClick01()"绑定点击事件并指定事件的处理函数 -->
		<input type="button" value="点击我"  onclick="myClick01()"/>
		<input type="button" value="事件绑定方式2" id="myBut" />
		<script>
			// 注意：HTML跟JS都是解释性语言，因此根据id获取元素对象的方法必须要在这个元素被解析执行以后才能获取到
			// 获取id为myBut的元素对象
			var myButObj = document.getElementById("myBut");
			// document.write(typeof myButObj);
			// 为html元素对象的onclick属性进行赋值(绑定一个事件处理方法)
			myButObj.onclick = function(){
				alert("事件绑定方式2")
			};
		</script>
	</body>
</html>

事件绑定例子

控制只能输入数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// OBJ为事件源对象的形参可以任意
			function checkNum(obj){
				// keyCode表示键盘的按键源码，每个键盘的按键都是固定的编码
				// 48-57是大键盘的0-9按键，96到105是小键盘的0-9按键，8表示的是退格键
				/* alert(obj.keyCode); */
				var KeyCode = obj.keyCode;
				// alert(KeyCode);
				if ((KeyCode < 48 || KeyCode > 57) && (KeyCode < 96 || KeyCode > 105) && KeyCode != 8)
				{
					/* alert("不是数字！"); */
					return false; // 进入if表示用户按了非法按键，返回一个false用来阻止浏览器的默认行为
				}
				return true;
			}
		
		</script>
	</head>
	<body>
<!-- 			onkeydown绑定键盘按下事件并指定事件处理方法
			checkNum(event)自定义的事件处理方法 
			event：表示事件源的对象，我们绑定的是键盘按下事件，因此event表示的是键盘的某个按键
					这个event在使用时是一个固定的名字不能修改，这个名字是HTML定义的。
			注意：事件绑定中必须要将事件处理方法的返回值进行return，如果方法返回一个true表示通过，false表示阻止浏览器默认行为。
			-->
		<input type="text" id = "test" onkeydown="return checkNum(event)" />
		<!--<script type="text/javascript">
  			document.getElementById("test").onkeydown = function(){ // 与直接在标签中进行事件绑定效果一致。
  				return checkNum(event);
  			}
  		</script>-->
	</body>
</html>

15. innerText和innerHTML操作元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/**
			 * innerText和innerHTML属性的区别
			 * 
			 * innerText 获取或设置某个HTML元素中的纯文本内容，只能获取纯文本的东西，如果设置数据时用它，数据中包含的html代码会以纯文本形式显示出来。
			 * 
			 * innerHTML 获取或这只某个HTML元素中的HTML内容，可以获取元素中的HTML代码和文本内容，如果设置数据为HTML代码，它会将这段代码编译后再设置到页面上。
			 */
			
		
			function innerTextTest(){
				var myDivObj = document.getElementById("myDiv");
				myDivObj.innerText='<a href="http://www.baidu.com">百度</a>';
			}
			function innerHtmlTest(){
				var myDivObj = document.getElementById("myDiv");
				myDivObj.innerHTML='<a href="http://www.baidu.com">百度</a>';
			}
		
		</script>
	</head>
	<body>
		
		<input type="button" value="innerText" onclick="innerTextTest()" />
		<input type="button" value="innerHTML" onclick="innerHtmlTest()" />
		<div id = "myDiv">
			Div测试内用
		</div>
	</body>
</html>

16. 复选按钮的全选和取消

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function checkedAll(obj){
				// 获取所有class属性为habit的HTML元素对象返回一个数组
				var habits = document.getElementsByClassName("habit");
				for (var i = 0; i < habits.length; ++i)
				{ // 循环设置所有爱好与全选框状态一致
					habits[i].checked = obj.checked;
				}
			}
			function setCheckedAll(obj){
				// 获取全选框对象
				var myAll = document.getElementById("checkall")
				if (!obj.checked){ // 说明取消选择
					myAll.checked = false;
					return;
				}
				// 程序执行到这说明是选中了当前obj
				var habits = document.getElementsByClassName("habit"); // 获取所有爱好
				for (var i = 0; i < habits.length; ++i)
				{ 
					if (!habits[i].checked){
						myAll.checked = false;
						return;
					}
				}
				myAll.checked = true;
			}
		
		</script>
	</head>
	<body>
		<!-- 	this 表示触发当前事件的HTML元素对象，这里表示的当前的这个全选复选按钮 -->
		<input type="checkbox" id="checkall" onclick="checkedAll(this)"/>全选<br/>
		<input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>吃<br/>
		<input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>喝<br/>
		<input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>玩<br/>
		<input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>乐<br/>
		<input type="checkbox" class="habit" onclick="setCheckedAll(this)"/>睡<br/>
	</body>
</html>

17.下拉菜单的多级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var v_hb = ["石家庄", "邯郸", "保定"];
			var v_sd = ["济南", "青岛"];
			var v_jl = ["长春", "吉林", "四平"];
		
			function initCity(obj){
				// 获取下拉菜蛋的value属性值，选择哪一项获取的value就是哪一个option的value属性值
				var v_sfId = obj.value;
				// 定义一个城市数组
				var v_cities = undefined;
				// 初始化城市数组，这里后期应该从数据库中获取
				switch(v_sfId){
					case "1":
						v_cities = v_hb;
						break;
					case "2":
						v_cities = v_sd;
						break;
					case "3":
						v_cities = v_jl;
						break;
				}
				// 获取城市下拉菜单
				var v_selectCity = document.getElementById("selectCity");
				
				v_selectCity.innerHTML = '<option value = "0">请选择</option>'; // 清空
				
				/*1. HTML拼接方式实现联动
				for (var i = 0; i < v_cities.length; ++i){
					v_selectCity.innerHTML += '<option value = "'+(i+1)+'">'+v_cities[i]+'</option>';
				} */
				// 2.appendChild追加的方法
				for (var i = 0; i < v_cities.length; ++i){
					// 根据元素名创建一个对象
					var v_option = document.createElement("option");
					// 设置下拉菜单选项的value值
					v_option.value = (i+1);
					// 设置下拉菜单选项的显示内容
					v_option.textContent = v_cities[i];
					// 追加到目标HTML元素中
					v_selectCity.appendChild(v_option);
				}
			}
		
		</script>
	</head>
	<body>
		省份<select onchange="initCity(this)">
			<option value = "0">请选择</option>
			<option value = "1">河北</option>
			<option value = "2">山东</option>
			<option value = "3">吉林</option>
		</select>
		城市<select id="selectCity">
			<option value="0">请选择</option>
		</select>
	</body>
</html>

18. 动态添加和删除行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function addTr(){
				var v_myTableObj = document.getElementById("myTable");
				
				// 创建一个HTML元素对象
				var v_tr = document.createElement("tr");
				// 设定自定义的tr中的内容
				v_tr.innerHTML = '<tr><td>姓名</td><td><input type="text"/></td><td><a href="javascript:void(0)" οnclick="delTr(this)">删除行</a></td></tr>'
				// 将自定义的tr追加到表格末尾
				v_myTableObj.appendChild(v_tr);
			}
			function delTr(obj){
				/**
				 * 节点遍历属性
				 * parentElement 获取某个HTML元素的父节点元素，返回一个HTML元素对象，如果没有父则返回null
				 * children 获取某个HTML元素的所有子节点元素，返回一个对象数组，没有的话就返回null
				 * previousElementSibling获取某个HTML元素的前一个元素对象(获取哥哥元素)，返回一个元素对象，如果没有前一个则返回null
				 * nextElementSibling获取某个HTML元素的后一个元素对象(获取弟弟元素)，返回一个元素对象，如果没有后一个则返回null
				 */
				obj.parentElement.parentElement.remove(); // 获取a标签的爷爷即tr，然后删除
			}
		
		</script>
	</head>
	<body>
		<input type="button" value="添加"  onclick="addTr()"/>
		<form action="xxx.html">
			<table id = "myTable">
				<tr>
					<td>姓名</td>
					<td><input type="text"/></td>
				</tr>
			</table>
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

19. 网页时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function showTime(){
				var v_myDivObj = document.getElementById("myDiv");
				var date = new Date();
				v_myDivObj.innerHTML = date.getFullYear()+"年" + (date.getMonth()+1) + "月" + date.getDate() + "日" + date.getHours() + ":" + date.getMinutes()  + ":" + date.getSeconds();
			}
		
		</script>
	</head>
	<body>
		<div id = "myDiv">
			
		</div>
		<script>
			// showTime();
			// 每间隔指定的时间自动执行指定的方法
			/**
			 * 参数1 为自动执行的方法
			 * 参数2 间隔的时间
			 * 这个方法会返回一个定时任务的id，这个id用于清空这个定时任务
			 */
			window.setInterval("showTime()", 1000);
			// 延迟指定的时间调用一次指定的方法
			/**
			 * 参数1 被调用的方法
			 * 参数2 延迟的时间
			 * 这个方法会返回一个定时任务的id，这个id用于清空这个定时的任务
			 */
			// window.setTimeout()
			
			/* window.clearInterval(intervalId) 根据定时任务id停止定时任务
			window.clearTimeout(timeoutId) 根据延迟任务id停止延迟任务*/
		</script>
	</body>
</html>

20. 轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var imgs = ['Five.jpg', 'Lying.jpg', 'White.jpg', '蓝眼.png', '佐伊.jpg', '佐伊0.jpg', '佐伊佐伊.jpg'];
			var index = 0;
			function nextImg(num){
				var v_myImgObj = document.getElementById("myImg");
				index += num;
				if (index >= imgs.length){ // 当前图片已经达到了最后一张然后又点击了一次下一张
					index = 0; // 设置索引值为0指向第一张图片
				}else if (index < 0)
				{ // 当前图片在第一张然后又点击了一次上一张
					index = imgs.length - 1;
				}
				v_myImgObj.src = imgs[index];
			}
		
		</script>
	</head>
	<body>
		<img src = "Five.jpg" id = "myImg" width="300px" onmouseover="stop()" onmouseout="start()"/><br/>
		<input type="button" value="上一张" onclick="nextImg(-1)"/>
		<span id="mySpan"></span>
		<input type="button" value="下一张" onclick="nextImg(1)"/>
		
		<script>
			var intervalId = window.setInterval("nextImg(1)", 3000);
			function stop(){
				window.clearInterval(intervalId);
			}
			function start(){
				intervalId = window.setInterval("nextImg(1)", 3000);
			}
			
			function setImg(num){
				index = num; // 设置指定的索引值
				nextImg(0); // 调用切换图片的方法，并传递一个0表示不进行任何的切换计算
				// 停止一次轮播图的切换
				stop();
				start(); // 再次启动一次轮播图
			}
			var v_mySpanObj = document.getElementById("mySpan");
			for (var i = 1; i <= imgs.length; ++i){
				v_mySpanObj.innerHTML += '<a href="javascript:void(0)" οnclick="setImg('+(i-1)+')">' + i + '</a>   ';
			}
		</script>
	</body>
</html>

21. 正则表达式

语法：

var reg = /表达式/[表达式参数]
var reg = new RegExp("表达式", ["表达式参数"])

表达式参数的取值：

g：全文查找出出现的所有pattern
i：忽略大小写
m：多行查找

正则对象有2类

查找包含的正则
var reg = /表达式/; 例如：var reg = /\d/是否包含数字
匹配的正则
var reg = /^表达式$/;例如：var reg = /^\d$/ 匹配判断字符串是否是1位的数字

简单例子：

/* // 验证某个字符串是否包含中文
			var reg = /[\u4e00-\u9fa5]/;
			var str = prompt("清输入一个字符串：");
			document.write(reg.test(str)); // test方法，作用是验证参数字符串是否符合这个正则对象的规则，如果符合规则则返回true，否则返回false。 */
			
			/**
			 * 匹配邮箱是否合法
			 * xxx@xxx.com.cn
			 */
			var reg01 = /^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.com(\.cn)?$/
			var email = prompt("清输入邮箱");
			document.write(reg01.test(email));

正则表达式知识点

22. 表单的验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function checkName(){
				// 获取到姓名的表单元素
				var v_nameObj = document.getElementById("name");
				// 获取数据
				var v_nameValue = v_nameObj.value;
				// 获取到显示name不合法信息的span对象
				var v_nameMessageObj = document.getElementById("nameMessage");
				
				
				var reg = /^[a-zA-Z0-9_]{6,10}$/; // 注意{6,10}不能写成{6, 10}!!!!
				if (!reg.test(v_nameValue)){
					v_nameMessageObj.innerHTML='<font color="red" style="font-size: 12px;">对不起！用户名必须在6-10个字符之间，并且只能由数字、字母和下划线组成</font>';
					return false;
				}
				v_nameMessageObj.innerHTML='<font color="palegreen" style="font-size: 12px;">该用户名可用!</font>';
				return true;
			}
			function checkForm(){
				if (!checkName()){
					alert("信息不正确");
					return false;
				}
				return true;
			}
		</script>
		
	</head>
	<body>
		
		<form action="xxx.html">
			姓名<input type="text" onblur="checkName()" id="name"/><span id="nameMessage"></span><br/>
			<input type="submit" value="注册" onclick="return checkForm()"/>
		</form>
	</body>
</html>

23. BOM编程——confirm

弹出一个对话框让用户选择确定或者取消，如果用户选择的是确定则返回true否则返回false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function delTag(obj){
				if (confirm("你确认要删除吗？")){ // 用户选择了确认
					obj.parentElement.remove(); // 删除它的父亲div
				}
			}
		</script>
	</head>
	<body>
		<div>
			<p>哈喽我的朋友</p>
			<a href="javascript:void(0)" onclick="delTag(this)">删除</a>
		</div>
	</body>
</html>

24. BOM编程——open

打开一个新窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testOpen(pageUrl){
				open(pageUrl, null,
"height=1000,width=1000,status=yes,toolbar=yes,menubar=yes,location=no");
			}
		</script>
	</head>
	<body>
		<a href="javascript:void(0)" onclick="testOpen('http://www.baidu.com')">百度</a>
	</body>
</html>

具体查手册window的open方法

25. BOM编程——close

关闭当前页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function closePage(){
				/**
				 * 关闭当前页面
				 */
				close();
			}
		
		</script>
	</head>
	<body>
		<input type="button" value="关闭" onclick="closePage()" />
	</body>
</html>

26. BOM编程——opener

可以用来实现在子页面和父页面之间消息传递
子页面是指在父页面中通过open方法打开的页面
通过在子页面中通过opener可以获取父页面对象，调用父页面的方法、变量等。
例子：

<!--parent.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var testVar = 100;
			function openPage(){
				open("027child.html");
			}
			function showMessage(){
				var myDivObj = document.getElementById("myDiv");
				myDivObj.innerHTML = testVar;
			}
		
		</script>
	</head>
	<body>
		<input type="button" value="打开子页面" onclick="openPage()"/>
		<div id="myDiv">
			
		</div>
	</body>
</html>
<!--027child.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var parentObj = window.opener;
			function getMessage(){
				var myDivObj = document.getElementById("myDiv");
				myDivObj.innerHTML = parentObj.testVar;
			}
			function sendMessage(obj){
				parentObj.testVar = obj.value;
				parentObj.showMessage();
			}
			
		</script>
	</head>
	<body>
		<h1>这是子页面</h1>
		<input type="button" value="获取父元素信息" onclick="getMessage()"/>
		<div id="myDiv">
		</div>
		传送信息给父元素：<input type="text" onblur="sendMessage(this)" />
	</body>
</html>

27. BOM编程——onload

onload事件，是在浏览器加载完成以后自动触发这个方法
也可以在body标签中直接使用onload属性绑定这个加载事件

28. BOM编程——history

history表示浏览器中的历史记录
方法：

go(num)方法：表示访问历史记录中的某个页面(相对于当前页面)

num>0表示访问历史记录当前页面的下num个页面。即1表示下一个，2表示下2个。
num<0表示访问历史记录当前页面的前几个页面。即-1表示前1个，-2表示前2个。
注意：如果历史记录中没有访问记录那么go方法是无效的。

forward()方法：表示访问历史记录中的当前页面的下一个页面，等效于go(1)
back()方法：表示访问历史记录中的当前页面的上一个页面，等效于go(-1)

29. BOM编程——location

表示地址栏对象，可以修改地址栏中的地址改变页面的内容，也可以获取地址栏中的一项相对应的数据如ip地址或端口等等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// 直接转向
			// window.location.href = "028index3.html"; // 在网页上输入WWWW.baidu.cn会自动转到www.baidu.com
			document.write(window.location.host + "<br/>");
			document.write(window.location.port + "<br/>");
			document.write(window.location.hostname);
		
		</script>
	</head>
	<body>
		<p>location页面</p>
	</body>
</html>

30. eval

功能：将一个符合JS语法规则的字符串转换成JS代码，并且执行这个代码。
使用场景：

可以实现动态方法的调用，例如用Java代码向页面传递一个数据，这个数据可以是一段JS代码，也可以是一个JS的方法调用，用来实现页面响应成功的方法回调。

简单小栗子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/**
			 * eval（string)
			 * 将一个符合JS语法规则的字符串转换成JS代码，并且执行这个代码
			 */
/* 			eval（"alert('张三')");
			使用场景：
			1. 可以实现动态方法的调用，例如后期我们可以使用Java代码向页面传递一个数据
			这个数据可以是一段JS代码，也可以是一个JS的方法调用，用来实现页面响应成功的方法回调。 */
			function test01(){
				alert("这是test01函数");
			}
			function test02(){
				alert("这是test02函数");
			}
			 eval（prompt('请输入方法名test01()或test02()'));
		</script>
	</head>
	<body>
		
	</body>
</html>

31. JSON

一种轻量级的数据交互格式
JSON是以对象的形式来呈现我们的数据
使用场景：

Ajax(异步请求)中，用于作数据返回的一种数据格式。
跨语言程序调用时作为数据返回的一种数据格式例如C语言要调用Java语句。这时程序会根据一个特定的数据格式进行返回，我们会使用字符串返回一个JSON格式的数据。
跨系统应用调用，例如A系统(软件)调用B系统(软件)，B系统返回了C对象那么A系统必须要拥有C类。这时我们会使用字符串返回一个JSON格式的数据给A系统，然后A系统解析这个字符串然后转换成我们所需要的数据类型。

JSON数据的两种格式

JSON对象

定义语法：
var jsonObj = {"属性名":属性值, "属性名":属性值, "属性名":属性值, ...., "属性名":属性值}注意在这""跟''不通用，属性名一定要用双引号。
访问语法：

对象名.属性名获取数据
对象名.属性名 = 数据赋值

注意：

数据除基本数字型以外其余类型需要添加""例如时间和字符串。
一个JSON对象中可以包含另外一个JSON对象。如果我们要访问一个JSON中内嵌的一个JSON，一定要访问到这个内嵌的JSON中的基本数据类型，否则返回的就是个object。

JSON数组

定义语法：

var jsonArray = [{"属性名":属性值, "属性名":属性值, "属性名":属性值, ...., "属性名":属性值}, {"属性名":属性值, "属性名":属性值, "属性名":属性值, ...., "属性名":属性值}, {"属性名":属性值, "属性名":属性值, "属性名":属性值, ...., "属性名":属性值}]

访问语法：

对象名[索引].属性名获取数据
对象名[索引].属性名 = 数据赋值

注意：

一个JSON数组中可以存放若干个JSON对象，也可以存放JSON数组。

简单使用：

var jsonObj = {"name":"张三", "age":23};
			// alert(jsonObj); // object
/* 			alert(jsonObj.name + " " + jsonObj.age);
			jsonObj.name = "李四";
			alert(jsonObj.name + " " + jsonObj.age); */
			var jsonArray = [{"name":"张三1", "age":23}, {"name":"张三2", "age":24}, {"name":"张三3", "age":25}];
			for (var i = 0; i < jsonArray.length; ++i){
				document.write(jsonArray[i].name + "   " + jsonArray[i].age + "<br/>");
			}

补充知识

JSP和JS的简单区别

JSP：JavaServer Pages(隶属于Java语言的，运行在jvm当中)
JS：JavaScript(运行在浏览器上)

JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。对应一个事件句柄onclick。（事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on。）事件句柄是以HTML标签的属性存在。
如何使用JS代码弹出消息框？
在JS中有一个内置的对象叫做window，全部小写，可以直接拿来用，window代表的是浏览器对象。
window对象有一个函数叫做：alert，用法是：window.alert(“消息”);这样就可以弹窗了。
JS中字符串可以使用双引号，也可以使用单引号。
JS中的一条语句结束之后可以使用分号”;“,也可以不用。
JS代码注释

单行 //注释内容
多行/*注释内容*/

BOM和DOM的关系：

javascript可以后端吗 javascript能写后端吗_java

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：javascriptif语句作业 javascript中if else if应用

下一篇：java中io不关闭的后果 java platform se binary可以关闭吗

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

javascript可以后端吗 javascript能写后端吗

javascript可以后端吗 javascript能写后端吗

JS学习

1.什么是JavaScript，有什么用？

2.在HTML中嵌入JavaScript代码的三种方式

3. 标识符

4. 变量

5. 函数

6. 数据类型

7. 自定义对象

8. void让超链接失效

9. =、==、===的区别

10. for in

11. 数组

12. Date对象

13. 常用事件

14. 事件绑定

15. innerText和innerHTML操作元素

16. 复选按钮的全选和取消

17.下拉菜单的多级联动

18. 动态添加和删除行

19. 网页时钟

20. 轮播图

21. 正则表达式

22. 表单的验证

23. BOM编程——confirm

24. BOM编程——open

25. BOM编程——close

26. BOM编程——opener

27. BOM编程——onload

28. BOM编程——history

29. BOM编程——location

30. eval

31. JSON

补充知识

51CTO博客