前端学习笔记三：JavaScript（2）变量的分类和作用域+利用浏览器调试模式测试+HTML事件+表示特殊字符（+运算符+各种循环和条件语句【略】）_JavaScript

第五段：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script type="text/javascript">
			/*
				在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
				可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
				只要函数运行完毕，本地变量就会被删除。
				
				而在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
				
				另外，JavaScript 变量的生命期从它们被声明的时间开始。
				局部变量会在函数运行以后被删除。
				全局变量会在页面关闭后被删除。
			*/
		   /*
				以上乃至之前都说的是赋予一个类型为var的变量，其实还可以不给变量声明属性的：
				如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
				并且这种变量默认是全局变量
				非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，即该变量是可以删除的。
		   */
		  var var1 = 1; // 不可配置全局属性
		  var2 = 2; // 没有使用 var 声明，可配置全局属性
		  
		  console.log(this.var1); // 1
		  console.log(window.var1); // 1
		  console.log(window.var2); // 2
		  
		  delete var1; // false 无法删除
		  console.log(var1); //1
		  
		  delete var2; 
		  console.log(delete var2); // true
		  console.log(var2); // 已经删除 报错变量未定义
		</script>
	</head>
	<body>
		
	</body>
</html>

运行结果：
（不完整）：
在这里插入图片描述
第二部分从，增加了从delete var1; // false 无法删除开始的部分：

第六段：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script type="text/javascript">
			/* 		JavaScript 事件
				HTML 事件是发生在 HTML 元素上的事情。
				当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
				
				HTML 事件可以是浏览器行为，也可以是用户行为。
				以下是 HTML 事件的实例：
				1. HTML 页面完成加载
				2. HTML input 字段改变时
				3. HTML 按钮被点击
				通常，当事件发生时，你可以做些事情。
				在事件触发时 JavaScript 可以执行一些代码。
				HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
			*/
			function displayDate(){
				document.getElementById("demo3").innerHTML=Date();
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
		</script>
		<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
		<p id="demo"></p>
		<button onclick="this.innerHTML=Date('demo2')">现在的时间是?</button>
		<p id="demo2"></p>
		<button onclick="displayDate()">现在的时间是?</button>
		<p id="demo3"></p>
	</body>
</html>

运行结果：
在这里插入图片描述

第七段：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script type="text/javascript">
			// 关于字符串里的特殊字符，如果想要在JavaScript中表示特殊字符，在特殊字符的前面加转义字符‘\’(反斜杠)即可
			var word = "I'd rather be dry, but at least I'm alive!"
			document.write(word);
			document.write("<p>" + word.length + "</p>");
			/* 以下内容不详细讲解了，在其它语言都是相通的：
				比较运算符、逻辑运算符、条件运算符；
				if\if...else 条件句、switch条件句、for循环和while/do while循环
				以下给个例子
			*/
		   function myFunction(){
			   var a = "";
			   /* 以下分别演示while循环和for循环，他们的演示结果是一样的
			   var i = 0;
			    while(i > 5)
			    	 a = a + "我这个月吃了" + i +"次博多" + "<br/>";
			   */
			   for(var i = 0; i < 5; i++)
				   a = a + "我这个月吃了" + i +"次博多" + "<br/>";
			   if (i > 4)
					a = a + "这个月吃的次数有点多噢~" + "<br/>"
			   document.getElementById("item1").innerHTML=a;
		   }
		</script>
	</head>
	<body>
		<p>按一下下面的按钮显示循环效果</p>
		<button onclick="myFunction()">不要点我！</button>
		<p id="item1"></p>
	</body>
</html>