三、JS-CSDN博客

本文链接：https://blog.csdn.net/GRuion/article/details/121099512

了解

作用：产生交互

命名规范：（参考Java）

数据类型：只有一个 var 类型，是弱语言类型。

数据内容：数值型（整数型、浮点型）、字符串型（""\''）、布尔型（true\false）、null、underdi

类型转换：

运算符号：（参考java）注意整型除法

控制结构：（参考java）

条件表达式：在逻辑判断中，任何变量类型的空值代表false，非空代表true。

内部调用：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>JS测试</title>
		<style></style>
		<script type="text/javascript" charset="utf-8">
		    alert("你好");
		</script>
	</head>
	
	<body>
	   
	</body>
</html>

外部引用：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>JS测试</title>
		<style></style>
		<script language="JavaScript" src="js.js"></script>
	</head>
	
	<body>
	</body>
</html>

外部文件[ js.js ]:

alert("你好");

打印金子塔

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>JS测试</title>
		<style></style>
		<script type="text/javascript" charset="utf-8">
		    document.write("<h2 align='center'>HA");
		    document.write("<h2 align='center'>▲");
		    for(var i=2;i<100;i++){
			    document.write("<hr align='center' width='"+i+"%'>"); 
			}
		    
		</script>
	</head>
	
	<body>
	</body>
</html>

运算与自动类型转换

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>JS测试</title>
		<style></style>
		<script type="text/javascript" charset="utf-8">
		var a="abc";
		var b=123;
		var c=false;
		var d=true;
		alert("abc+123="+(a+b));
		alert("abc+false="+(a+c));
		alert("abc+true="+(a+d));
		alert("123+false="+(b+c));
		alert("123+true="+(b+d));
		alert("false+true="+(c+d));
		</script>
	</head>
	
	<body>
	</body>
</html>

类型转换

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>JS测试</title>
		<style></style>
		<script type="text/javascript" charset="utf-8">
		
		var n=1;
		alert(typeof(n));
		alert(n.toString());
		
		var a='123';
		alert(typeof(parseInt(a)));
		alert(parseInt(a));
		
		var b='123.5';
		alert(parseInt(b));
		alert(parseFloat(b));
		
		var c='abc';
		alert(parseInt(c));		

// NaN（Not a Number，非数）
        alert(isNaN(1));
		
		</script>
	</head>
	
	<body>
	</body>
</html>

函数

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>JS测试</title>
		<style>
		input{
		    height: 40px;
		    width: 200px;
		}
		</style>
		<script type="text/javascript" charset="utf-8">
    		function clicks(a)
    		{
    		    alert("让你点，你就点，你的面子往哪搁"+a);
    		}
    		function click1()
    		{
    		    alert(click2(1,1));
    		}
    		function click2(a,b)
    		{
    		    return a+b;
    		}
		</script>
	</head>
	
	<body>
	    <div align="center">
    	    <input type="button" name="" id="" value="点我啊" onclick="clicks(666)"/>
    	    <input type="button" name="" id="" value="别点我" onclick="click1()"/>	        
	    </div>
	</body>
</html>

数组的处理

创建方式：2种

特性：js数组中元素可以越界、类型可以不

属性：length

方法：join()、reverse()、sort()

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>JS测试</title>
		<style></style>
		<script type="text/javascript" charset="utf-8">
		 
		var a = new Array();
		a[0]=1;
		a[1]=1.2;
		a[2]='ab';
		a[3]=true;
		console.log(a);
		console.log(a.length);
		
		var b = new Array("AA","BB","CC");
		console.log(b);
		console.log(b.length);
		console.log(b.reverse());
		console.log(b.join("abc"));
		
		var c = new Array(5,4,8,4,1,9);
		console.log(c);
		console.log(c.sort());
		
		</script>
	</head>
	<body></body>
</html>

字符串处理

属性：length、

方法：toUpperCase()、substring()、charAt()、split()

日期Date

创建方式： var day=new Date();

方法：

Math对象

属性：E、PI、

方法：random()、round()、

注：产生0-10的整数，Math.round(Math.random()*10);

BOM（浏览器对象模型）

DOM（文档对象模型）

图中红框部分属于BOM，绿框部分属于DOM

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='content-type' content="text/html; charset=utf-8">
		<title>JS测试</title>
		<style>
		</style>
		<script type="text/javascript" charset="utf-8">
		function reloads()
		{
		    location.reload();
		}
// 		window.alert("你好");
// 		var s = window.confirm("1");
// 		console.log(s);
// 		window.prompt("2");
// 		window.alert(window.status);

// 		function b()
// 		{
// 		    window.open("reg.html");
// 		}
// 		function forwards()
// 		{
// 		    history.forward();
// 		}
// 		function backs()
// 		{
// 		    history.back();
// 		}

        
        // function changelabel()
        // {
        //     var mylabels = document.getElementById("mylabels");
        //     alert(mylabel.innerText);
        //     mylabels.innerText="456789";
        // }
        
        // function changelabels()
        // {        
        //     var mylabel = document.getElementsByName("mylabel");
        //     console.log(mylabel.innerText);
        //     mylabel[0].innerText="世界真好";
        //     mylabel[1].style.background="yellow";
        // }

//***********************************************************
//  	window.setTimeout(alert("三秒之后"),3000);
// 		window.setInterval(alert("每秒一次"),1000);
// 		function a()
// 		{
// 		    window.close();
// 		    //https://blog.csdn.net/Liu_Jun_Tao/article/details/88537515
// 		}
		
// 		function d()
// 		{
// 		    cleartimeout(di);
// 		}

//         function test()
//         {
//             document.bgColor = "green";
//             document.titel = "test";             ？？？？？
//             document.writeln("<div>添加</div>")????????
//         }
//***********************************************************

		</script>
	</head>
	
	<body>
	    <input type="button" name="" id="" value="页面重载"  onclick="reloads()"/>
        <!--<input type="button" name="" id="" value="关闭"  onclick="a()"/>-->
        <!--<input type="button" name="" id="" value="打开"  onclick="b()"/>-->
        <!--<input type="button" name="" id="" value="取消"  onclick="d()"/>-->
        <!--<input type="button" name="" id="" value="页面前进"  onclick="forwards()"/>-->
        <!--<input type="button" name="" id="" value="页面后退"  onclick="backs()"/>-->
        <!--<input type="button" name="" id="" value="页面更改"  onclick="test()"/>-->
        
        <!--<label id="mylabels">你好</label>-->
        <!--<label name="mylabel">欢迎光临</label>-->
        <!--<label name="mylabel">项目一部</label>-->
        <!--<input type="button" name="" id="" value="标签更改"  onclick="changelabel()"/>-->
        <!--<input type="button" name="" id="" value="标签更改"  onclick="changelabels()"/>-->
	</body>
</html>