B042-JavaScript基础&BOM-CSDN博客

本文链接：https://blog.csdn.net/ffhgjgj6576567/article/details/131132789

1.js引入三种方式

js引入方式

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- js引用方式一： 行内引用 -->
		<a href="JavaScript:alert('点我出来了')">点我</a>
		
		<!-- js引用方式一： 内部引用 -->
		<script type="text/javascript">
			alert("第二种内部引用")
		</script>
		
		<!-- js引用方式一： 外部引用 -->
		<script type="text/javascript" src="../js/new_file.js" ></script>
	</body>
</html>

new_file.js

alert("第三种外部引用方式")

2.基本语法

1.定义变量

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
		var num=123;
		var str="王天霸";
		var flag = 0;		//(false,0、NaN、Undefined、空字符串、null都代表false)
		var aa=null;
		var bb;
		
		alert(typeof num);	//number
		alert(typeof str);	//string
		alert(typeof flag);	//number
		alert(typeof aa);	//object
		alert(typeof bb);	//undefined
		
		console.debug(num,str,flag,aa,bb)		 //在浏览器控制台看，123 "王天霸" 0 null undefined
		
		if(false){
			alert(".....")
		}
		
		</script>
	</body>
</html>

2.运算符

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 10;
			var b = 20;
			
			var c = a + b;
			var d = a - b;
			var e = a * b;
			var f = a / b;
			
			console.debug(c,d,e,f)
			
			var g = true;
			var h = false;
			if(!(g&&h)){
				alert("...")
			}
		</script>
	</body>
</html>

3.流程控制语句

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var a = 10
			var b = 20
			alert(a > b ? a : b)

			if(a > b) {
				alert(a)
			} else {
				alert(b)
			}

			for(var i = 0; i < 10; i++) {
				console.debug("aaa")
			}
			var arr = ["王天霸", "阮经天", "力很弱"]
			for(i in arr) {
				console.debug(i);
				console.debug(arr[i]);
			}
		</script>
	</head>

	<body>
	</body>

</html>

4.定义函数

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			function add(a,b){
				return(a+b);
			}
			var num = add(10,11)
			alert("num: "+num)
			
			
			function add2(){  // 尽量不要定义相同的函数名
			}
			var num2 = add2(20)
			alert("num2: "+num2);	//undefined
			add2();		//null
			
					
			//匿名函数可以直接用变量来接收和使用
			var abc = function(){
				alert("我是没有名字的，匿名函数")
			}
			abc();
			
		</script>
	</head>
	<body>
	</body>
</html>

5.局部变量和全局变量

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var abc = "王天霸" // 全局变量
			
			function add(){
				var abc = "力很弱";//加var是局部变量,不加var是重新赋值  
				alert(abc);
			}
			add();
			alert(abc);
		</script>
	</head>
	<body>
	</body>
</html>

6.日期对象

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth()+1;//国外用法差一个月
			var day = date.getDate();
			var hours = date.getHours();
			var minute = date.getMinutes();
			alert(year+"-"+month+"-"+day+"  "+hours+":"+minute)
		</script>
	</head>
	<body>
	</body>
</html>

7.字符串对象

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var str = "abcdefg";
			
			var i = str.indexOf("abc");
			alert("i:"+i);	//0
			
			var a = str.substring(2,5);//两个索引位置
			alert(a);	//cde
			
			var b = str.substr(2,5);//后面是长度
			alert(b);	//cdefg
			
			var str2 = "ab,cd,ef,g";
			var arr = str2.split(",");	// 分隔
			for(x in arr){
				console.debug(arr[x]);
			}
			
			var c = str.lastIndexOf("b");//最后一位数的索引位置
			alert(c);	// 1
			
		</script>
	</head>
	<body>
	</body>
</html>

8.Global

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			eval("alert('eval3')")
			var str="我是中国人"
			var enStr=encodeURI(str)
			alert(enStr)
			var deStr=decodeURI(enStr)
			alert(deStr)
			var aa="234234hsdfgjhs"
			var b=parseInt(aa);
			alert(b)
			console.debug(b)
			
		</script>
	</head>
	<body>
	</body>
</html>

9.Math

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var num=12.6;
			var i=-667;
			var b=Math.abs(i);
			
			alert(b);
			alert(Math.ceil(num));	// 向上取整
			alert(Math.floor(num));	// 向下取整
			alert(Math.random());	// 随机数
			alert(Math.max(3,6));	// 最大数
			alert(Math.round(num))	// 四舍五入
			
		</script>
	</head>
	<body>
	</body>
</html>

10.自定义对象

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			function Foo(){}		// 函数与对象语法一模一样，首字母可换为大写
			var f1 = new Foo();
			f1.name = "张三";
			//添加方法
			f1.say = function(){
				alert(11);
			}
			console.debug(f1);
			//调用方法
			f1.say();
			
			// 使用this添加
			function Person(name, age) {
				this.name = name;
				this.age = age;
				this.eat = function(){
			       console.debug("吃鸭腿");
				}
			}
			var p1=new Person('zs',21);
			p1.eat();
			var p2=new Person();
			p2.eat();
			
		</script>
	</head>
	<body>
	</body>
</html>

11.prototype

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//prototype：可以对类添加自定义方法
			Date.prototype.hehe=function(){
				alert("哈哈");
			}
			var aa=new Date ();
			aa.hehe();
		</script>
		
	</head>
	<body>
	</body>
</html>

12.定时器

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var a = confirm("确定要删除吗")
			alert(a)
			
			function setFun(){
				console.debug("java是最好的语言")
			}
			var time =setInterval(setFun,3000);
			console.debug("time: "+time)
			
			function clrbtn(){
				clearInterval(time)
			}
		</script>
	</head>
	<body>
		<button onclick="clrbtn()">清除定时器按钮</button>
	</body>
</html>

13.href

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
//			location.href = "https://www.fu365.com/"
			
			var address = location.href
			address = decodeURI(address)
			alert(address)
			
		</script>
	</body>
</html>