JavaScript之学习笔记

其他 2018-06-23 20:37:25 阅读次数: 2

HTML中写JS的两种方式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<!-- JS脚本按顺序从上至下依次执行 -->
	
	<!-- 引入外部JS文件，标签体内的代码不会执行。 -->
	<script type="text/javascript" src="outer.js">/* alert("我不会执行"); */</script>

	<script type="text/javascript">
		alert("这里可以写JS代码");
	</script>
	
</body>
</html>

outer.js

alert("outer");

五种基本数据类型

number、、boolean、null、undefined

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<script type="text/javascript">
	
		var v1 = 123;
		var v2 = "123";
		var v3 = true;
		var v4 = null;
		// v5未定义
		
		document.write(typeof(v1));document.write("<br>");
		document.write(typeof(v2));document.write("<br>");
		document.write(typeof(v3));document.write("<br>");
		document.write(typeof(v4));document.write("<br>");// object
		document.write(typeof(v5));document.write("<br>");

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

基本语句

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- JS基本语句 -->
	<script type="text/javascript">
		// if-else
		var a = 1;
		if (a == 1) {
			document.write("a==1" + "<br>");
		} else {
			document.write("a!=1" + "<br>");
		}
		document.write("<hr>");

		// switch语句
		var b = "1";
		switch (b) {
			case "0":
				document.write("星期天" + "<br>");
				break;
			case "1":
				document.write("星期一" + "<br>");
				break;
			case "2":
				document.write("星期二" + "<br>");
				break;
			case "3":
				document.write("星期三" + "<br>");
				break;
			case "4":
				document.write("星期四" + "<br>");
				break;
			case "5":
				document.write("星期五" + "<br>");
				break;
			case "6":
				document.write("星期六" + "<br>");
				break;
			default:
				document.write("非星期!!!" + "<br>");
		}
		document.write("<hr>");

		// while
		var i = 1;
		while (i <= 3) {
			document.write("i=" + i + "<br>");
			i++;
		}
		document.write("<hr>");

		// do-while
		var j = 1;
		do {
			document.write("j=" + j + "<br>");
			j++;
		} while (j <= 3);
		document.write("<hr>");

		// for
		var k;
		for (k = 1; k <= 3; k++) {
			document.write("k=" + k + "<br>");
		}
		document.write("<hr>");

		// 可变参数，函数内部存在一个隐含arguments[]，保存形参
		function sum() {
			var sum = 0;
			for ( var index = 0; index < arguments.length; index++) {
				sum += arguments[index];
			}
			return sum;
		}
		document.write(sum(1, 2) + "<br>");
		document.write(sum(1, 2, 3) + "<br>");
		document.write(sum(1, 2, 3, 4) + "<br>");
	</script>

</body>
</html>

字符串

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- 字符串相关函数 -->
	<script type="text/javascript">
	
		// 将字符串变成超链接
		var s1 = "我是超链接";
		document.write(s1.link("2.html"));
		document.write("<br>" + "<hr>");

		// 字符串拼接
		var s2 = "hel";
		var s3 = "lo";
		var s23 = s2.concat(s3);// 返回新的字符串
		document.write(s23);// hello
		document.write("<br>" + "<hr>");

		// 返回指定位置的字符
		var s4 = "xxdty";
		document.write(s4.charAt(2));//d 如果字符位置不存在，则返回空字符
		document.write("<br>" + "<hr>");

		// 字符串遍历
		for ( var i = 0; i < s4.length; i++) {
			if (i == (s4.length - 1)) {
				document.write(s4.charAt(i));
			} else {
				document.write(s4.charAt(i) + ",");
			}
		}// x,x,d,t,y
		document.write("<br>" + "<hr>");

		// 返回字符串首位置
		var s5 = "good good study, day day up";
		document.write(s5.indexOf("day"));//17
		document.write("<br>" + "<hr>");

		// 切割字符串
		var s6 = "x-x-d-t-y";
		var array = s6.split("-");
		document.write(array);// 数组
		document.write("<br>" + "<hr>");// x,x,d,t,y

		// 替换字符串
		var s7 = "abcdefg";
		var s8 = s7.replace("abc", "ABC");// 返回新字符串
		document.write(s8);// x,x,d,t,y
		document.write("<br>" + "<hr>");

		// 截取字符串
		var s9 = "012345678";
		var s10 = s9.substring(2, 7);// 包左不包右
		document.write(s10);
		document.write("<br>" + "<hr>");// 23456
		
	</script>

</body>
</html>

数组

JS中的数组可以包含不同数据类型。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<script type="text/javascript">
		
		// JS中，数组可以包含不同类型的数据
		
		// 数组的第一种定义方式
		var arr1 = [ 1, "22", true ];
		document.write("数组长度为：" + arr1.length + "。 内容为：" + arr1);
		document.write("<br>");

		// 数组的第二种定义方式
		var arr2 = new Array(3);// 数组的长度为3
		arr2[0] = 1.5;
		arr2[1] = "哈哈哈";
		arr2[2] = true;
		document.write("数组长度为：" + arr2.length + "。 内容为：" + arr2);
		document.write("<br>");

		// 数组的第三种定义方式
		var arr3 = new Array(3.14, "嘻嘻嘻", false, new Date());// 数组的内容
		document.write("数组长度为：" + arr3.length + "。 内容为：" + arr3);
		document.write("<br>");
		
	</script>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- 数组相关函数 -->
	<script type="text/javascript">
		// 数组拼接
		var array1 = [ 1, "2" ];
		var array2 = [ 3, "4", true ];
		var newArray = array1.concat(array2);// 返回新数组，原来数组均不变
		document.write(newArray);//[1,"2",3,"4",true]
		document.write("<br>" + "<hr>");

		// 将数组元素拼接成一个字符串
		var array3 = new Array(4);
		array3[0] = "a";
		array3[1] = "b";
		array3[2] = "c";
		array3[3] = "d";
		var str = array3.join("-");// 返回字符串 
		document.write(str);// a-b-c-d
		document.write("<br>" + "<hr>");

		//向数组末尾添加元素，返回新的长度
		//【注意】如果添加的是一个数组，则把数组当做一个整体字符串添加进去
		var array4 = [ 0, 1, 2, 3 ];
		var newLength1 = array4.push(4);// 添加元素，改变原数组
		document.write(newLength1 + " : " + array4);// 5 ： 0,1,2,3,4
		document.write("<br>" + "<hr>");

		var array5 = [ 0, 1, 2, 3 ];
		var array6 = [ 4, 5, 6 ];// 添加数组，改变原数组
		var newLength2 = array5.push(array6);
		document.write(newLength2 + " : " + array5 + "<br>");// 5 ： 0,1,2,3,4,5,6
		// 事实上，上面输出结果中 "4,5,6"是一个字符串
		for ( var j = 0; j < array5.length; j++) {
			document.write(array5[j] + "<br>");
		}
		/*  
			0
			1
			2
			3
			4,5,6 
		 */
		document.write("<br>" + "<hr>");

		// 删除数组最后一个元素
		var array7 = [ "天龙八部", "射雕英雄传", "神雕侠侣", "倚天屠龙记" ];
		var last = array7.pop();//删除并返回最后一个元素
		document.write(last + " : " + array7);// 倚天屠龙记 : 天龙八部,射雕英雄传,神雕侠侣
		document.write("<br>" + "<hr>");

		// 数组逆序
		var array8 = [ 1, 2, 3, 4, 5 ];
		array8.reverse();
		document.write(array8);// 5,4,3,2,1
		document.write("<br>" + "<hr>");
	</script>

</body>
</html>

函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<script type="text/javascript">

		// 函数的第一种定义方式
		function add1(x, y) { //参数列表只写变量名
			return x + y;
		}

		// 函数的第二种定义方式
		var add2 = function(x, y){
			return x + y;
		}

		// 函数的第三种定义方式
		var add3 = new Function("x,y", "return x+y");
		
		// 调用函数
		document.write(add1(1,2)+"<br>");
		document.write(add2(3,4)+"<br>");
		document.write(add3(5,6)+"<br>");
		
	</script>

</body>
</html>

全局函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- JS的全局函数不属于任何一个对象，直接使用 -->
	<script type="text/javascript">
		// eval("js脚本")
		eval("alert('哈哈哈')");// 弹框显示"哈哈哈"

		// encodeURI()和decodeURI()
		var s1 = "太阳";
		var s2 = encodeURI(s1);//编码
		document.write(s2 + "<br>");// %E5%A4%AA%E9%98%B3
		var s3 = decodeURI(s2);// 解码
		document.write(s3 + "<br>");// 太阳

		// isNaN()，判断是否为 非数字
		document.write(isNaN("12a") + "<br>");// true
		document.write(isNaN("123") + "<br>");// false，"123"算数字
		document.write(isNaN(123) + "<br>");// false

		// 解析函数
		document.write(parseInt(12.34) + "<br>");//12
		document.write(parseInt("12.34") + "<br>");//12
		document.write(parseInt("1234a") + "<br>");//1234
		document.write(parseInt(true) + "<br>");// NaN
	</script>

</body>
</html>

全局变量和局部变量

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<script type="text/javascript">
		var s = "8";// 全局变量,在所有脚本及其函数中都可以使用
	</script>

	<script type="text/javascript">
		alert(s);// 8
	</script>

	<script type="text/javascript">
		alert(s + "2");//字符串拼接，得82
	</script>

	<script type="text/javascript">
		alert(s - "2");// 【注意】：此时做减法，得6（number类型）
	</script>

	<script type="text/javascript">
		function show() {
			alert(s);
		}
		// 调用函数
		show();// 8
	</script>
	
	<script type="text/javascript">
		
		function print1(){
			var ss = 100;// 局部变量，只能在此函数内部使用
			alert(ss);
		}
		
		/* 
		function print2(){
			alert(ss);// 错误，无法访问其它函数中定义的变量
		}
		 */
		
		// 调用函数
		print1();// 100
		
	</script>
	
</body>
</html>

Date对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<script type="text/javascript">
	
		var date = new Date();
		var time = date.getTime();
		document.write("距离1970年1月1日 0时0分0秒：" + time + "<br>");// 毫秒
		document.write("距离1970年1月1日 0时0分0秒：" + time / 1000 / 3600 / 24 / 365 + "<br>");// 年
		document.write("<br>" + "<hr>");

		document.write(date.toLocaleDateString() + "<br>");
		document.write(date.toLocaleTimeString() + "<br>");
		document.write(date.toLocaleString() + "<br>");

		document.write("年：" + date.getFullYear() + "<br>");
		document.write("月：" + (date.getMonth() + 1) + "<br>");// 月份从0-11，因此实际月份要加1
		document.write("日：" + date.getDate() + "<br>");
		document.write("时：" + date.getHours() + "<br>");
		document.write("分：" + date.getMinutes() + "<br>");
		document.write("秒：" + date.getSeconds() + "<br>");

		document.write("星期：" + date.getDay() + "<br>");// 日期从0-6，星期天是0
		
	</script>

</body>
</html>

Math对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<script type="text/javascript">
		// 绝对值
		document.write(Math.abs(-1) + "<br>");//1
		// 向上取整
		document.write(Math.ceil(2.5) + "<br>");//3
		// 向下取整
		document.write(Math.floor(2.5) + "<br>");//2
		// 四舍五入，即：先加0.5，再向下取整
		document.write(Math.round(3.4) + "<br>");//3
		document.write(Math.round(-3.4) + "<br>");//-3
		// 产生[0,1)之间的随机数
		document.write(Math.random() + "<br>");
		// 产生[x,y)之间的随机数，例如[10,100)
		document.write(Math.random() * (100 - 10) + 10 + "<br>");
	</script>

</body>
</html>

DOM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- DOM -->
	<script type="text/javascript">
		
		// navigator：获取浏览器信息
		document.write(navigator.appName+"<br>");//Microsoft Internet Explorer
		
		// screen：获取屏幕信息
		document.write(screen.height+"<br>");// 1080
		document.write(screen.width+"<br>");// 1920
		
		// location：获取请求URL地址
		document.write(location.href+"<br>");// file:///D:/MyEclipseWorkSpace1/JavaWeb1/WebRoot/Html/1.html
		// 通过事件设置location的href，可以实现网页跳转
		function go(){
			location.href = "2.html";
		}
		
		// history对象
		// 上一页
		function back(){
			history.back();
		}
		// 下一页
		function forward(){
			history.forward();
		}
		
		// 弹出提示框
		window.alert("海！你好啊");
		// 弹出确认框
		var flag = window.confirm("are you sure?");// 返回值记录用户的选择
		if(flag==true){
			document.write("您选择了True"+"<br>");
		}else{
			document.write("您选择了False"+"<br>");
		}
		// 弹出对话框
		var answer = window.prompt("你还好吗？"); // 返回值记录用户的输入
		document.write(answer+"<br>");
		
		// open("打开新窗口的地址","","窗口特征(宽、高)")
		function openNewWindow(){
		 	window.open("2.html");// 打开一个新窗口，显示2.html
		}//【注意】跨页面操作时，var parentWindow = window.opener;得到创建这个窗口的窗口
		
		// 定时器
		var myInterval = window.setInterval(function show1(){
			alert("每一个周期我执行一次");
		},3000);// 每3000ms执行一次
		// 清除定时器
		window.clearInterval(myInterval);
		
		// 延时器
		var myTimeout = window.setTimeout(function show1(){
			alert("指定时间后我执行，且只执行一次");
		},3000);// 3000ms后执行一次
		// 清除延时器
		window.clearTimeout(myTimeout);
		
	</script>
	
	<!-- location用法 -->
	<input type="button" value="跳转到2.html" onclick="go();"><br>
	
	<!-- history用法 -->
	<input type="button" value="前一页" onclick="back();">
	<input type="button" value="后一页" onclick="forward();">
	
	<!-- open用法 -->
	<input type="button" value="打开2.html窗口" onclick="openNewWindow();"> 

</body>
</html>

BOM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- BOM -->
	<script type="text/javascript">
		// document.write(变量或者Html代码)
		document.write("<h1>" + 666 + "</h1>");
		document.write("<h2 style='color:orange;'>" + "哈哈哈" + "</h2>");

		// document.getElementById("id值")，通过标签的id属性值得到 指定标签
		function fun1() {
			var b1 = document.getElementById("b1");
			alert(b1.value);// Button1
		}

		// document.getElementsByName("name值")，通过标签的name属性值得到 标签数组
		function fun2() {
			var array1 = document.getElementsByName("b2");//返回数组
			for ( var i = 0; i < array1.length; i++) {
				alert(array1[i].value);// 依次弹出Button2、Button3
			}
		}

		// document.getElementsByTagName("tag名称")，通过标签名称得到 标签数组
		function fun3() {
			var array2 = document.getElementsByTagName("input");// 返回数组
			for ( var j = 0; j < array2.length; j++) {
				alert(array2[j].value);// 依次弹出Button1、Button2、Button3
			}
		}
	</script>

	<input type="button" value="Button1" id="b1" name="b1" onclick="fun1();"> <br>
	<input type="button" value="Button2" name="b2" onclick="fun2();"> <br>
	<input type="button" value="Button3" name="b2" onclick="fun3()"> <br>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- BOM -->
	<script type="text/javascript">
		
		/* 在末尾添加节点 */
		
		function addStar(){
			var li = document.createElement("li");// 创建新标签节点
			var star = document.createTextNode("郭富城");// 创建文本节点
			li.appendChild(star);// 标签节点添加文本节点
			var ul = document.getElementById("ul");
			ul.appendChild(li);// ul中添加li
		}

	</script>

	<ul id = "ul">
		<li>刘德华</li>
		<li>张学友</li>
		<li>黎明</li>
	</ul>
	<input type="button" value="添加" id="b1" onclick="addStar();"><br>

</body>
</html>

BOM总结：

获取父节点：子节点.parentNode;

获取所有子节点：父节点.childNodes;

获取第一个子节点：父节点.firstChild;

获取最后一个子节点：父节点.lastChild;

获取指定子节点的唯一有效方法：父节点.getElementsByTagName("标签名称");

获取下一个兄弟节点：节点.nextSibling;

获取上一个兄弟节点：节点.previousSibling；

获取属性值：getAttribute("属性名称")

设置属性值：setAttribute("属性名称","属性值");

删除属性：removeAttribute("属性名称"); 但是，不能删除value属性

创建标签节点：document.createElement("标签名称")；

创建文本节点：document.createTextNode("文本内容");

末尾添加节点：父节点.appendChild(被添加的节点);

在某节点前插入新节点：父节点.insertBefore(newNode,oldNode)；

删除子节点：父节点.removeChild(子节点);

替换子节点：父节点.replaceChild(newNode,oldNode);

复制节点：var 该节点的复制品 = 节点.cloneNode(boolean)，参数为true;

Button提交表单

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<form id="form">
		姓名：<input type="text" name="username"><br> 
		密码：<input type="password" name="password"><br> 
		<input type="button" value="提交" onclick="submit();">
	</form>


	<!-- 使用Button提交表单 -->
	<script type="text/javascript">
		function submit() {
			var form = document.getElementById("form");
			// 设置action
			form.action = "/JavaWeb1/Html/1.html";
			// 提交表单
			form.submit();
		}
	</script>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41706150/article/details/80679687
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022