本文链接：https://blog.csdn.net/JINGMaNong/article/details/116189706

1.javascript 的输出

为了以后调试程序，输出运行结果，判断程序运行是否正常，找出错误并修改.
页面初始化事件
页面初始化事件 onload 事件–【页面一打开就开始运行/执行】
1.创建 javascript 函数元素，在 body 标记中通过 onload 事件调用

function testload(){
 alert("页面初始化事件");
 <body onload="testload();">
 }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面初始化事件</title>
		<script>
			function test1(){
				alert("页面初始化事件");
			}
		</script>
	</head>
	<body onload="test1();">
		<h1>页面初始化事件 onload 事件--【页面一打开就开始运行/执行】</h1>
		<h2>创建 javascript 函数元素，在 body 标记中通过 onload 事件调用</h2>
	</body>
</html>

2.通过匿名函数的方式实现

window.onload=function(){
 alert("页面初始化事件");
 }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面初始化事件</title>
		<script>
			window.onload=function(){
				alert("页面初始化事件");
			} 
		</script>
	</head>
	<body>
		<h1>通过匿名函数的方式实现 window.onload=function()</h1>
	</body>
</html>

**1.使用 window.alert() 弹出警告框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript 的输出</title>
		<script>
			window.onload=function(){
				var i=10;
				var r=i/4;
				window.alert(r);
			}
		</script>
	</head>
	<body>
		<h>使用 window.alert() 弹出警告框。</h>
		
	</body>
</html>

2.使用 document.write() 方法将内容写到 HTML 文档中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>document.write</title>
		<script>
			window.onload=function(){
				var i=10;
				var r=i/4;
				document.write("<h1>"+r+"</h1>");
			}
		</script>
	</head>
	<body>
		<h1>使用 document.write() 方法将内容写到 HTML 文档中</h1>
	</body>
</html>

3.使用 innerHTML 写入到 HTML 元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>innerHTML</title>
		<script>
			window.onload=function(){
				var i=10;
				var r=i/4;
			document.getElementById("res").innerHTML=r;
			
			}
		</script>
	</head>
	<body>
		<h1>使用 innerHTML 写入到 HTML 元素</h1>
		<h3 id="res">显示程序的运行结果</h3>
	</body>
</html>

4.使用 console.log() 写入到浏览器的控制台。**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用 console.log()</title>
		<script>
			window.onload=function(){
				var i=10;
				var r=i/4;
			console.log(r);
					
			}
		</script>
	</head>
	<body>
		<h1>使用 console.log() 写入到浏览器的控制台。</h1>
	</body>
</html>

3.页面初始化的两种方式：

1.创建javascript函数元素，在boby标记中通过onload时件调用。

2.通过匿名函数的方式实现。

4.javascript 中的变量

变量是程序运行中的最小单位，存储数据的”容器”。
为什么需要使用变量来存储数据？
为了减少程序的运行空间。

创建变量需要什么？变量的组成？
1.创建变量的关键字–var
2.变量的名称
3.初始值【决定变量的数据类型】
4.作用域【有效范围】

定义变量和变量赋值
定义变量的格式： var 变量名称;
变量赋值的格式：变量名称=具体数据值;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript中的变量</title>
		<script>
			window.onload=function(){
				var name1;
				name="zhangsan";
				alert("name1");
			}
		</script>
	</head>
	<body>
		<h1>变量赋值</h1>
		<h3>变量名称=具体数据值</h3>
	</body>
</html>

定义变量+变量赋值的格式：var 变量名称=具体数据值;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义+赋值</title>
		<script>
			window.onload=function(){
				var age=(1314);
				alert(age);
			}
		</script>
	</head>
	<body>
		<h1>定义变量+变量赋值的格式：var 变量名称=具体数据值</h1>
	</body>
</html>

也可以一次定义多个变量，多个变量之间用“,”分割，然后逐个赋值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一次定义多个变量</title>
		<script>
			window.onload=function(){
				var test,hello,address;
				test="world";
				hello="好";
				address="西安";
				//alert(hello);
				var name1="ai",age1=520,address="大雁塔";
				alert(age1);
				
			}
		</script>
	</head>
	<body>
		<h2>一次定义+赋值多个变量，多个变量之间用“,”分割</h2>
	</body>
</html>

变量的名称在创建的时候不能胡乱写，他有一定的规则:

变量的名称可以由数字、字母、$ 、_ 组成,数字不能开头。【hello1 1hello】
变量的名称不能有空格，不能使用中文。
区分大小写（y 和 Y 是不同的变量）
不能是关键字。var var;

什么是关键字？

Javascript 语言为一些单词赋予了特殊的含义，这是被赋予了特殊的含义的单词就是关
键。【被 javascript 语言占用】。
变量命名的格式：
一般情况下变量的名称都是小写字母。
当这个变量的名称是由多个单词构成可以使用”_”或者”$”作为分隔符.

[例如 var test; var test_hello;]

javascript 中的数据类型

数据类型–变量的数据类型决定保存变量的数据将来所能进行的操作。
例如:数字【整数/小数】类型可以进行加减乘除四则混合运算的，如果是字符串类型的数据是不能进行加减乘除四则混合运算的。
Javascript 脚本语言是一种弱类型的语言。
弱类型–弱数据类型–在定义/声明变量的时候不确定这个变量是什么类型，直至为这个变量赋值以后，通过所赋予的具体数据值决定变量的数据类型。所以在 Javascript 脚本语言中定义变量都是 var 关键字。

javaScript 具体数据类型

字符串类型（String）、
数字类型(Number)、
布尔类型(Boolean)、
数组类型(Array)、
对象类型(Object)、
空类型（Null）、
未定义类型（Undefined）。

1. 字符串类型（String）
1 . 被双引号””,或者’’包围形成的数据就是字符串类型。“hello” ‘world’

var str1="hello"; var str2='world';

2.被双引号””包围的字符串数据中，如果出现双引号””，使用单引号代替，强制转义字符“"”代替

var str3="hello"world"";  错误 
var str4="hello'world'";  
 var str5="hello\"world\"";

3.被直接赋予字符串数据的变量，也可以是字符串对象。

var str4="hello,world";

length 属性得到字符串的字符个数

var len=str4.length;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串类型（String）</title>
		<script>
			window.onload=function(){
				var test1="zifuchuan";
				var test2;
				test2='hello';
				//alert(test1);
				//3.强 制转义字符“\"”代替
				var test3="ruike说:\"hello\"";
				//alert(test3);
				//4.length 属性得到字符串的字符个数
				var test5="hello,maike";
				alert(test5.length);
				
			}
		</script>
	</head>
	<body>
		
	</body>
</html>

2. 数字类型(Number)

在 javascript 中数字类型包括整数和小数【浮点型】

var num1=100; 
var num2=12.543;

极大或极小的数字可以通过科学（指数）计数法来书写

var y=123e5;
 var z=123e-5;

被直接赋予数字数据的变量，也可以是数字类型对象。

var num3=300;

保留两位小数部分

var test1=num3.toFixed(2);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字类型(Number)</title>
		<script>
			window.onload=function(){
				//1. 在 javascript 中数字类型包括整数和小数【浮点型】
				var num1=100;
				var num2=12.5;
				//2. 极大或极小的数字可以通过科学（指数）计数法来书写
				var y=123e5;
				//alert(y);
				//3. 被直接赋予数字数据的变量，也可以是数字类型对象。
				var num3=1.314;
				alert(num3.toFixed(2));
			}
		</script>
	</head>
	<body>
		
	</body>
</html>

3.布尔类型(Boolean)【逻辑类型】

取值只有两种：true/false，一般被用来做判断使用

var boo1=true;
 var boo2=false; 
 if(boo1){
alert(“判断正确”);
 }else{
 alert(“判断错误”);
  }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布尔类型(Boolean)</title>
		<script>
			window.onload=function(){
				var boo1=true;
				var boo2=false;
				alert(boo1);
			}
				
			
		</script>
	</head>
	<body>
		<h2>取值只有两种：true/false，一般被用来做判断使用</h2>
	</body>
</html>

4.数组类型(Array)

**1.**数组类型被被认为是对象类型

2.数组就是保存一组数据值的数据类型。

3.定义创建数组格式：var 数组名称=new Array();
4.数组赋值格式: 数组名称[下标]=数据值;

5.下标是数组中表示数据在数组中位置，从 0 开始，数组的第一个存储位置下标为 0，依次类推。

6.定义数组时直接赋值 var 数组名称=[数据值 1,数据值 2,…数据值 n];

7.从数组中获取数据值数组名称[下标];

8.length 属性得到数组中数据的个数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组类型(Array)</title>
		<script>
			window.onload=function(){
				//下标是数组中表示数据在数组中位置，从 0 开始，
				/*var Array1=new Array();
				array1[0]="zhangsan";
				array1[1]=520;
				array1[2]=true;
				*/
			   
				/*var strt="hello";
				var numt=1314;
				var boot=false;
				var array2=new Array();
				array2[0]=strt;
				array2[1]=numt;
				array2[2]=boot;
				//从数组中获取数据值 数组名称[下标];
				alert(array2[0]);
				*/
				//6.定义数组时直接赋值 var 数组名称=[数据值 1,数据值 2,......数据值 n];
				var array3=["wangwu",1314,"西安"];
				//从数组中获取数据值 数组名称[下标];
				//alert(array3[1]);
				//8.length 属性得到数组中数据的个数
				alert(array3.length);
			}
		</script>
	</head>
	<body>
		<h2>1.数组类型被被认为是对象类型</h2>
		<h2>2.数组就是保存一组数据值的数据类型。</h2>
		<h2>3.定义创建数组格式：var 数组名称=new Array();</h2>
		<h2>4.数组赋值格式: 数组名称[下标]=数据值;</h2>
		<h2>5.下标是数组中表示数据在数组中位置，从 0 开始，
			数组的第一个存储位置下标为 0，依次类推。</h2>
		<h2>6.定义数组时直接赋值 var 数组名称=[数据值 1,数据值 2,......数据值 n];</h2>
		<h2>7.从数组中获取数据值 数组名称[下标];</h2>
		<h2>8.length 属性得到数组中数据的个数。</h2>
		
	</body>
</html>

5.对象类型(Object)

1.通过“{}”定义的元素就是对象

2.对象能包含变量和函数【方法】
3.对象中的变量: 变量名称:变量值，如果有多个“,”分隔
4.对象中的函数：函数名称:function([参数 1]){[return xxx;]} ,如果有多个“,”分隔

5.访问对象中的变量: 对象名称.变量名称 / 对象名称[“变量名称”] / 对象名称[‘变量名称’]

6.访问对象中的函数: 对象名称.函数名称;

7.对象中的函数里访问对象的变量：this.变量名称 / 对象名称.变量名称对象名称[“变量名称”] / 对象名称[‘变量名称’]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象类型(Object)</title>
		<script>
			window.onload=function(){
				var student={
					name:"zhangsan",
					age:18,
					address:"西安",
					sayName:function(){
						alert("我是佩奇");
					},
					sayAge:function(){
						alert("我今年18岁");
					},
					test1:function(){
						alert(this.name+","+student.address+","+student.age);
					}
				};
				//5.访问对象中的变量: 对象名称.变量名称
				//alert(student.name);
				//alert(student['address']);
				//6.访问对象中的函数: 对象名称.函数名称;
				//student.sayName();
				//student.sayAge();
				//7.对象中的函数里访问对象的变量：this.变量名称
				student.test1();
			}
		</script>
	</head>
	<body>
		<h2>1.通过“{}”定义的元素就是对象</h2>
		<h2>2.对象能包含变量和函数【方法】</h2>
		<h2>3.对象中的变量: 变量名称:变量值 ，如果有多个“,”分隔</h2>
		<h2>4.对象中的函数： 函数名称:function([参数 1]){[return xxx;]} ,如果有多个“,”分隔</h2>
		<h2>5.访问对象中的变量: 对象名称.变量名称</h2>
		<h2>6.访问对象中的函数: 对象名称.函数名称;</h2>
		<h2>7.对象中的函数里访问对象的变量：this.变量名称</h2>
	</body>
</html>

6.空类型（Null）

通常情况下定义的变量如果不确定数据类型，可以使用 null 空类型代替。

var test1=null;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>空类型（Null）</title>
		<script>
			window.onload=function(){
				//var test=null;
				var name1;
				alert(name1);
			}
		</script>
	</head>
	<body>
		<h2>通常情况下定义的变量如果不确定数据类型，
		可以使用 null 空类型代替。</h2>
	</body>
</html>

7. 未定义类型（Undefined）

未赋值，不知道具体的数据类型，使用 Undefined 代替

var num1;
 alert(num1);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>未定义类型（Undefined）</title>
		<script>
			window.onload=function(){
				var num1;
				alert(num1)
				
			}
		</script>
	</head>
	<body>
		<h2>未赋值，不知道具体的数据类型，使用 Undefined 代替</h2>
	</body>
</html>