文章目录

1、JavaScript介绍
2、JavaScript和HTML代码的结合方式
- 2.1 第一种方式
- 2.2 第二种方式
3、JS的变量和数据类型
4、JS关系运算符
5、JS逻辑运算符
6、数组
7、JS函数的定义
8、JS函数的隐形参数arguments
9、JS中的自定义对象

1、JavaScript介绍

JavaScript（JS）语言诞生主要是为了完成页面数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

JS是Netscape网景公司的产品，最早取名LiveScript，为了吸引更多的Java程序员，更名JavaScript。因此Java和JavaScript没关系。

JS是弱类型，即类型可变。Java是强类型，即定义变量的时候，类型已确定，而且不可变。

Java中：
int i = 12;

---------------------
JavaScript中：
var i;
i = 12; 数值型
i = "abc" 字符串型

JavaScript的特点：

交互性（实现信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要可以解释JS的浏览器都可以执行，和平台无关）

2、JavaScript和HTML代码的结合方式

2.1 第一种方式

在head标签中或者body标签中，使用script标签来书写JavaScript代码

<!DOCTYPE html>
<html lang="en>
<head>
	<meta charset="UTF-8">
	<title>Hello,JS!</title>
	<script type="text/javascript">
		//alert是JS语言提供的一个警告框函数
		//可以接收任意类型的参数，传参就是警告框的提示信息
		alert("Hello,JavaScript！");
	</script>
	
</head>
<body>
</body>

</html>

运行效果：

2.2 第二种方式

使用script引入单独的JavaScript代码文件，类似CSS，达到复用的效果。script标签的src属性，可以指定外部js文件的路径。

//当前工程下定义1.js文件

alert("Hello,JavaScript!")

<!DOCTYPE html>
<html lang="en>
<head>
	<meta charset="UTF-8">
	<title>Hello,JS!</title>
	<script type="text/javascript" src="1.js"></script>
	
</head>
<body>
</body>

</html>

运行效果：

注意：

不能在一对script标签中同时使用这两种方式：

错误写法：
-------------------

<script type="text/javascript" src="1.js">
	alert("hello again");
</script>

正确写法，使用两对script标签：
-------------------

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
	alert("Hello again");
</script>

运行效果：

点击OK

3、JS的变量和数据类型

JavaScript中变量的定义格式：

var 变量名;
var 变量名 = 值；

JavaScript的变量类型包括：

数值类型：number，包括了Java中的byte、short、int、long、float、double
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function

<script type="text/javascript">
	vari;
	i=12;
	//typeof()是JS语言提供的一个函数
	alert(typeof(i));//number
	i="abc"
	alert(typeof(i));//string
</script>

JavaScript里的特殊值：

undefined：未定义，所有js变量未赋予初始值的时候，默认值都是undefined
null：空值
NAN：全称，Not a Number，非数值，非数字

<script type="text/javascript">
	var a = 12;
	var b = "abc";
	alert(a * b);//NAN
</script>

4、JS关系运算符

除了Java中的> < >=等等，JS中需要区分的有等于和全等于：

等于：== 简单的做字面值的比较
全等于：===除了做字面值的比较之外，还会比较两个变量的数据类型

<script type="text/javascript">
	var a = "12";
	var b = 12;
	alert(a == b); //true
	alert(a === b); //false
</script>

5、JS逻辑运算符

且：&&

当表达式全为真的时候，返回最后一个表达式的值
当表达式中，有一个为假的时候，返回第一个为假的表达式的值

<script type="text/javascript>
	var a = "abc";
	var b = true;
	var c = null;
	var d = false;
	alert(a && b); //true
	alert(b && a);//abc
	alert(c && a);//null
	alert(a && d && c);//false
</script>

//注意null别带引号，"null"是字符串，为真，true和false更别带了

或：||

当表达式全为假时，返回最后一个表达式的值
当表达式中，有一个为真时，返回第一个为真的表达式的值

取反：！

不同于Java，在JavaScript语言中，所有的变量都可以做为一个boolean类型的变量去使用。 且0、null、undefined、""（空串）都认为是false，其余为真。

<script type="text/javascript">
	var x = null;
	if (x) {
		alert("null为真");
	}else{
		alert("null为假");
	}
</script>

注意区分，JS中的""和” “，前者为假，但加了空格以后为真！！！

6、数组

JS中数组的定义格式：

var 数组名 = [];//空数组
var 数组名 = [1,"abc",true];

JavaScript中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。

<script type="text/javascript">
	var arr = [];
	alert(arr.length);//0
	
	arr[0]=12;//java中这样操作报错
	alert(arr[0]);
	alert(arr.length);//1
	
	arr[2] = "abc";
	alert(arr.length);//3，并不是2
	alert(arr[1]);//undefined
</script>

JS数组的遍历：

<script type="text/javascript">
	for (var i = 0;i<arr.length;i++){
		alert(arr[i]);
	}
</script>

7、JS函数的定义

第一种定义方式

//格式

function 函数名(形参列表){
	函数体；
}

不同于Java，JS函数的形参列表不用指定数据类型，也不用加var，直接写变量名就好。

//举例：

<script type="text/javascript">
	function fun(){
		alert("无参函数fun执行");
	}
	//调用
	fun();

	//定义有参JS函数，不用指定类型，
	//不用加var
	function fun2(a,b){
		alert(a+b);
	}
	fun2(1,2);
</script>

//定义有返回值的JS函数

<script type="text/javascript">
	function sum(num1,num2){
		var result = num1 + num2;
		return result;
	}
	alert(sum(100,200));
</script>

第二种定义方式

//格式

var 函数名 = function(形参列表){函数体；}

//举例

<script type="text/javascript">
	var sum = function(num1,num2){
		var result = num1 + num2;
		return result;
	}
	alert(sum(100,200));
</script>

注意：

在Java中方法可以重载，但在JS中函数的重载会直接覆盖掉上一次的定义

8、JS函数的隐形参数arguments

在function函数中不需要定义，但却可以直接用来获取所有参数的变量，称之为隐形参数。类似于Java中的可变长参数：public void fun (Object…args);可变长参数是一个数组。JS中的隐形参数也跟Java中的可变长参数一样，操作类似数组。

用法：

<script type="text/javascript">
	function fun(){
		alert(arguments.length);
		
		alert("无参excute");
		
		//操作类似数组
		for(var i=0;i<arguments.length;i++){
			alert(arguments[i]);
		}
	}
	fun(1,2,3,"a");
</script>

举例：

//需求：
//计算任意数量的参数相加，并返回结果

<script type="text/javascript">

	function sum(num1,num2){
		var result = 0;
		for(var i=0;i<arguments.length;i++){
			result +=arguments[i];
		}
		return result;
	}
	alert(sum(1,2,3));//6
	alert(sum(1,2,3,4,5,"abc"));//15abc
</script>

运行结果：

有”字符串“时，加号也是做了一个拼接。这个bug可加一个if分支修复：

<script type="text/javascript">

	function sum(num1,num2){
		var result = 0;
		for(var i=0;i<arguments.length;i++){
			if(typeof(arguments[i]) == "number"){
				result +=arguments[i];
			}
		}
		return result;
	}
	alert(sum(1,2,3));//6
	alert(sum(1,2,3,4,5,"abc"));//15
</script>

9、JS中的自定义对象

Object形式的自定义对象

对象的定义：

//定义一个对象实例，空对象
var 变量名 = new Object();

//定义一个属性
变量名.属性名 = 值；

对象的访问：


变量名.属性/函数名();

举例：

<script type="text/javascript">
	var obj = new Object();
	alert(typeof(obj));
	obj.name = "9527";
	obj.age = 22;
	obj.fun = function(){
		alert("姓名："+this.name+",年龄："+this.age);
	}
	alert(obj.age);
	obj.fun();
</script>

运行效果：

花括号形式的自定义对象

对象的定义：

//空对象
var 变量名 = {};

//定义一个属性，多个属性用逗号分开
var 变量名 = {
	属性名：值，
	属性名：值，
	属性名：值，
	函数名：function(){} //定义一个函数
}；

对象的访问：


变量名.属性/函数名();

举例：

<script type="text/javascript">
	var obj = {
		name:"9527",
		age:22,
		fun:function(){
			alert("姓名："+this.name+"，年龄："+this.age);
		}
	};
	alert(obj.name);
	obj.fun();
</script>