HTML学习之初尝试

1.下载webstorm，并进行trail七天体验（请自行寻找更久的使用方式，或使用VSCode，Xbuilder等）

创建第一个html文件，我们先对html代码进行一次简单的探索

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button  onclick="showInfo()"   style="width: 50%;  height: 40px;">点击</button>
	</body>
	<script  type="text/javascript">
		
		function  showInfo()
		{
			//控制台输出
			console.log("按钮点击输出")
			
			//警告弹出框输出(js有内置对象window对象)
			//window.alert("您点击了按钮");
			
			//整体重新渲染页面(js有内置对象document对象)
			//document.write("我重新写入了页面");
		}
		
		
	</script>
</html>

给点击按钮增加交互

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script  type="text/javascript">
		
		//javascript->typescript->arkts
		
		//js的函数的参数其实是一个动态参数列表
			function add(a)
			{
				//js的函数参数也是一个内置对象：arguments
				let  size  = arguments.length;
				console.log("传递的参数的个数为:"+size);
				
				for(let  i =0 ;i<size ;i++)
				{
					console.log("传递的每一个参数的值为:"+arguments[i])
				}
			}
			
			add(2,3,4);
			
			add(10,20);
			
	</script>
</html>

JS联动以及编写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script  type="text/javascript">
		
		//javascript->typescript->arkts
		
		//js的函数的参数其实是一个动态参数列表
			function add(a)
			{
				//js的函数参数也是一个内置对象：arguments
				let  size  = arguments.length;
				console.log("传递的参数的个数为:"+size);
				
				for(let  i =0 ;i<size ;i++)
				{
					console.log("传递的每一个参数的值为:"+arguments[i])
				}
			}
			
			add(2,3,4);
			
			add(10,20);
			
	</script>
</html>

用JS尝试写一个方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		function  getMax()
		{
			let max = arguments[0];
			
			for(let  i =0 ;i<arguments.length ;i++)
			{
				if(arguments[i]>max)
				{
					max = arguments[i];
				}
				
			}
		
			console.log("最大值是:"+max);
			
		}
		
		getMax(10,90,30);
		
		
	</script>
</html>

我们在Java中学过参数的传递方法方式，以地址传输，JS怎么样呢？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script  type="text/javascript">
		

		let  age = 25;
		
		  function  setAge(age)
		  {
			    age  =26;
		  }
		  		//按值传递
		  setAge(age);
		  
		  console.log(age);
		
		
		
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script  type="text/javascript">
		
		//json数据，是object，对象类型就是引用类型
        let person = {age:25};
		console.log(typeof  person);
		
		function  setPerson(person)
		{
				person.age = 26;	
		}
		//按地址传递 ，person对象类型就是引用类型
		setPerson(person);
		console.log(person.age);

		
		
		
	</script>
</html>

JS的面向对象如何？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script  type="text/javascript">
		
		   //js的函数另外一种机制，是基于函数的面向对象
	      function  Student(name,age)
		  {
			  this.name  = name;
			  this.age =age;
			  
			  this.run = function(){
				  console.log("跑");
			  }
			
		  }
		  
		  //创建对象
		  let  s1  =  new Student("李欣",30);
		  let  s2 =  new Student("罗洁",18);
		  
		 console.log(s1.name)
		 
		 s1.run()  
		 
		  console.log(s1.run == s2.run)
		  
		   
		
	</script>
</html>