文章目录
- 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>
运行结果：
