1.JavaScript 认识
上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。
由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。
为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。
2.使用
JavaScritp的基本元素是语句。一条语句代表着一条命令。通常以分号（;）结尾。
实际上分号用不用都行，只是为了增加阅读性。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题</title>
</head>
<body>
<script type="text/javascript">
document.writeln("hello world");
</script>
</body>
</html>
document.writeln("hello"); 仅仅是在文档中添加了一些文字,并没有什么明显的效果，
我们这么演示其实是告诉大家，js的作用就是这样通过代码去控制界面的呈现效果。
3.数据类型
我们学习编程语言大多数都是概述 → 数据类型 → 语法 → 类
JavaScript也是一样的,定义变量要使用到var关键字，在定义的同时可以为其初始化赋值。
-
局部变量：定义在函数中的变量称为局部变量，只能在该函数范围内使用。
-
全局变量：直接在script元素中定义的变量称为全局变量，可在任意地方使用。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>标题</title> </head> <body> <script type="text/javascript"> <!-- 定义字符串 --> var str = "abc"; <!-- 定义数值 --> var num = 1; <!-- 定义布尔 --> var status = false; </script> </body> </html> -
注意：
JavaScript是一种弱类型的语言，所谓弱类型,指的是他不需要明确的声明变量的类型，可以随意的赋值自己想声明类型的变量，还可以根据场景在类型间自由转换。 -
字符类型：string类型就是java中的字符串，
var str = "abc"; -
布尔类型：boolean类型由两个值，true和false。
-
数值类型：整数和浮点数都用number类型便是。
var num = 5;
var pi = 3.14;
var color = 0x123456;
4.定义函数
定义函数其实就是我们需要用到的一些API封装起来，这样的话我们就不用每次使用都重新写一遍，只需要调用函数即可。
例：定义有参函数，无参函数，有返回值函数
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题</title>
</head>
<body>
<script type="text/javascript">
<!-- 定义无参函数 -->
function hello(){
document.writeln("hello");
}
hello();
<!-- 定义有参函数 -->
function add(num1,num2){
document.writeln(num1+num2);
}
var num1 = 2;
var num2 = 3;
add(num1,num2);
<!-- 定义有返回值函数 -->
function getSum(num1,num2){
return (num1+num2);
}
document.writeln(getSum(num1,num2));
</script>
<hr/>
<script type="text/javascript">
hello();
</script>
</body>
</html>
5.创建对象
-
创建对象：通过new Object的方式来创建对象。
<body>
<script type="text/javascript">
var persion = new Object();
persion.name = "xioaming";
persion.age = 12;document.writeln(persion.name); document.writeln(persion.age); </script> </body> -
对象字面量：用这个可以直接定义对象及其属性。
<body>
<script type="text/javascript">
var persion = {
name : "xiaoli",
age : 1
};
document.writeln(persion.name);
document.writeln(persion.age);</script> </body> <!-- 注意： 属性的名称和值时间用冒号分隔(:) 多个属性之间用逗号分隔(,) 大括号之后必须用分号结尾(;) --> -
对象函数：使用上面的方式可以为对象添加变量，也可以为对象添加函数。
<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1, getSum : function(){ return 1+2; } }; document.writeln(persion.name); document.writeln(persion.age); document.writeln(persion.getSum()); </script> </body> <!-- 注意：方法内部使用对象属性时，要使用this关键字 -->
6.使用对象
-
读取和修改对象属性值：一种是直接
对象.属性名称，一种是对象["属性名称"]<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1, getSum : function(){ return 1+2; } }; persion.name= "haha"; persion["name"] = "hehe"; document.writeln(persion.name); document.writeln(persion["name"]); </script> </body> -
枚举对象属性：使用for ...in 语句。
<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1, getSum : function(){ return 1+2; } }; persion.name= "haha"; persion["name"] = "hehe"; document.writeln(persion.name); document.writeln(persion["name"]); for(var prop in persion){ document.writeln("name="+prop+",value="+persion[prop]+"<br>"); } </script> </body> <!-- 注意：对象.[变量名] 中括号里面的变量名不需要加双引号 --> -
增删对象的属性和方法
注意： 判断对象中是否存在某属性用： var hasName = "name" in persion; <body> <script type="text/javascript"> var persion = { name : "xiaoli", }; <!--增加属性和函数--> persion.age = 12; persion.getSum = function(){ return 1+2; }; for(var prop in persion){ document.writeln("name="+prop+",value="+persion[prop]+"<br>"); } <!-- 删除属性和函数--> delete persion.name; delete persion["age"]; delete persion.getSum; for(var prop in persion){ document.writeln("name="+prop+",value="+persion[prop]+"<br>"); } </script> </body>
7.运算符
| 运算符 | 说明 |
|---|---|
| ++、-- | 前置或后置自增或自减 |
| +、-、*、/、% | 加、减、乘、除、求余 |
| <、<=、>、>= | 小于、小于等于、大于、大于等于 |
| ==、！= | 相等、不相等 |
| ===、！== | 等同、不等同 |
| &&、II | 逻辑与、逻辑或 |
| = | 赋值 |
| + | 字符串连接 |
| ?: | 三元运算符 |
注意：
a：== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 。
b：而 === 和 !== 只有在相同类型下,才会比较其值。
8.显示类型转换
- 数值转换为字符串：可以使用toString方法
var str = (123).toString();
| 方法 | 说明 | 返回 |
|---|---|---|
| toString() | 以十进制形式表示数值 | 字符串 |
| toString(2) toString(8) toString(16) |
以二、八、十六进制表示数值 | 字符串 |
| toFixedn() | 以小数点后有n为数字的形式表示实数 | 字符串 |
| toExponential(n) | 以指数表示法表示数值， 尾数的小数点前后分别有1位数字和n位数字 |
字符串 |
| toPrecision(n) | 用n个有效数字表示数值 | 字符串 |
-
将字符串转换为数值：使用Number函数。
var num = Number("123");
| 函数 | 说明 |
|---|---|
| Number(str) parseFloat(str) |
生成一个整数或实数值 |
| parseInt(str) | 生成一个整数值 |
9.使用数组
-
注意：
a：创建数组的时候不需要声明数组中元素的个数，JS数组会自动调整大小以便容纳所有的元素。
b：不必声明数组所含数据的类型，JS中的素组可以混合包含各种类型的数据。 -
使用New创建数组
<body> <script type="text/javascript"> var array = new Array(); array[0] = "a"; array[1] = 12; array[2] = false; </script> </body> -
使用数组字面量
<body> <script type="text/javascript"> var array = ["a",12,false]; </script> </body> -
枚举数组内容
<body> <script type="text/javascript"> var array = new Array(); array[0] = "a"; array[1] = 12; array[2] = false; for(var i = 0;i<array.length;i++){ document.writeln("array["+i+"]="+array[i]) } </script> </body> -
内置的数组方法：这些方法是js对Array对象封装好的直接调用就可以了。
| 方法 | 说明 | 返回 |
|---|---|---|
| concat(<otherArray>) | 将数组和参数所致数组的内容合并成一个新数组 | 数组 |
| jion(<separator>) | 将所有数组的元素连接成一个字符串 | 字符串 |
| pop() | 将数组当做栈使用，删除并返回最后一个元素 | 对象 |
| push(<item>) | 将数组当做栈使用，将制定的数据添加到数组中 | void |
| reverse() | 就地反转数组元素的次序 | 数组 |
| shift() | 类似pop，但是操作的是第一个元素 | 对象 |
| skuce(<start>,<end>) | 返回一个子数组 | 数组 |
| sort() | 对数组进行排序 | 数组 |
| unshift(<item>) | 类似朴树，但是新元素插到数组的开头位置 | void |
10.异常处理
JS中用trry....catch语句处理错误。
<body>
<script type="text/javascript">
try{
var array;
document.writeln("num="+array[4]);
}catch(e){
document.writeln("Error:"+e);
}finally{
document.writeln("请检查你的代码");
}
</script>
</body>
11.比较undefined和null值
JS中有两个特殊的值：undefined和null，在视图读取未赋值的变量或对象没有属性时就是undefined值。
<body>
<script type="text/javascript">
var array = [1,2,3];
var persion = {
name:"xiaoming",
};
document.writeln("age=" + persion.age);
document.writeln("num=" + array[4]);
</script>
</body>
输出结果：age=undefined num=undefined
null与undefined略有不同，undefined是在未定义的情况下得到的值。
null是用于表示已经赋值了一个值但是该值不是一个有效的object、string、number或boolean。
如果想检查某个属性是否为null或undefined，时需要用！非运算符就可以。
Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
网友评论