Javascript简介

web前端有三层：

• HTML：从语义的角度，描述页面的结构
• CSS：从审美的角度，描述样式（美化页面）
• Javascript：从交互的角度，描述行为（提升用户体验）

JavaScript的组成

• ECMAScript5.0：定义了js的语法标准：包含变量、表达式、元素符、函数、if语句 for循环 while循环、内置的函数
• DOM：操作网页上元素的API。比如让盒子显示隐藏、变色、动画form表达验证
• BOM：操作浏览器部分功能API。比如刷新页面、前进后退、让浏览器自动滚动

ECMAScript 5.0

• JS的引入方式

• 注释

• 调试语句

• 变量的声明

• 变量的命名规范

• 基本数据类型

• 复杂(引用)数据类型

• 运算符

• 数据类型转换

• 流程控制

• 常用内置对象(复杂数据类型)（重点）

• 函数（重点）

• 伪数组arguments

• 对象Object(重点)

• Date日期对象

• JSON(重点)

JS的引入方式

• 内接式

  <script type="text/javascript"> </script>

• 外接式

  <!--相当于引入了某个模块--> <script type="text/javascript" src = './index.js'></script>

注释

1#### 调试语句
2
3- alert(''); 弹出警告框
4- console.log('');  控制台输出
5
6
7
8#### 变量的声明
9
10在js中使用var关键字 进行变量的声明,注意 分号作为一句代码的结束符
11
12```javascript
13var a = 100;
14(es6 常量用const定义，其他建议用let(块级)定义，特殊清空用以用var)

创建变量的方法

1var a; //先定义
2a = 100; // 后赋值
3
4//也可以直接定义变量+赋值
5var a = 100;

基本数据类型

数值类型number

如果一个变量中，存放了数字，那么这个变量就是数值型的

1var a = 100;    //定义了一个变量a，并且赋值100
2console.log(typeof a);    //输出a变量的类型 使用typeof 函数 检测变量a的数据类型
3//特殊情况
4var b = 5/0;
5console.log(b);     //Infinity 无限大
6console.log(type of b);    //number 类型

ps:在JavaScript中，只要是数，就是数值型(number)的。无论是整数，浮点数（即小数）、无论大小、无论正负，都是number类型的。

字符串类型:string

1var a = "abcde";
2var b = "路飞";
3var c = "123123";
4var d = "哈哈哈哈哈";
5var e = "";     //空字符串

连字符和+号的区别

键盘上的 + 可能是连字符，也可能是数字的加号。如

1console.log("我" + "爱" + "你");   //连字符，把三个独立的汉字，连接在一起了
2console.log("我+爱+你");           //原样输出
3console.log(1+2+3);             //输出6

总结：如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）

布尔类型：boolean

1var isShow = false;
2console.log(typeof b1);

空对象：null

1var c1 = null;//空对象. object
2console.log(typeof c1);

未定义：undefined

1var d1;
2//表示变量未定义
3console.log(typeof d1);

运算符

赋值运算符

以var x = 12,y=5来演示示例

算数运算符

var a = 5,b=2;

前自增和后自增的异同点：

相同点：无论是前自增还是后自增，对于变量而言，没有区别，都是自身+1

不同点：

前自增：先+1（变量自身+1），后赋值（将变量的值赋值给自增表达式的结果）

后自增：先赋值，后+1

比较运算符

var x = 5;

数据类型转换

将number类型转换成string类型

隐式转换

1var n1 = 123;
2var n2 = '123';
3var n3 = n1+n2;
4// 隐式转换
5console.log(typeof n3);

强制转换

1// 强制类型转换String(),toString()
2var str1 = String(n1);
3console.log(typeof str1);
4
5var num = 234;
6console.log(num.toString())

将string类型转换成number类型

1var  stringNum = '789.123wadjhkd';
2var num2 =  Number(stringNum);
3console.log(num2); //NaN  Not a Number 但是一个number类型
4
5// parseInt()可以解析一个字符串 并且返回一个整数
6console.log(parseInt(stringNum))； //789
7console.log(parseFloat(stringNum)); //789.123

任何的数据类型都可以转换为boolean类型

1var b1 = '123'; //true
2var b2 = 0; //false
3var b3 = -123 //true
4var b4 = Infinity; //true
5var b5 = NaN; //false
6var b6; //false
7var b7 = null; //false
8//使用Boolean(变量) 来查看当前变量的真假

流程控制

if

1var age = 20;
2if(age>18){
3    //{}相当于作用域
4    console.log('可以去会所');
5}
6alert('alex'); //下面的代码照样执行

if-else

1var age = 20;
2if(age>18){
3    //{}相当于作用域
4    console.log('可以去会所');
5}else{
6    console.log('好好学js,年纪够了再去会所');
7}
8alert('alex'); //下面的代码照样执行

if-else if -else

1var age = 18;
2if(age==18){
3    //{}相当于作用域
4    console.log('可以去会所');
5}else if(age==30){
6    console.log('该娶媳妇了！！');
7}else{
8    console.log('随便你了')
9}
10alert('alex'); //下面的代码照样执行

逻辑与&&, 逻辑或||

1//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入
2//逻辑与&& 两个条件都成立的时候 才成立
3if(sum>400 && math>90){
4    console.log('清华大学录入成功')
5}else{
6    alert('高考失利')
7}
8
9//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
10//逻辑或  只有有一个条件成立的时候 才成立
11if(sum>400 || english>85){
12    alert('被复旦大学录入')
13}else{
14    alert('高考又失利了')
15}

switch 语句

1var gnamescore = 'better';
2
3switch(gnamescore){
4    case 'good':
5    console.log('玩的很好')
6    break;        //表示退出
7    case 'better':
8    console.log('玩的老牛逼了')
9    break;
10    case 'best':
11    console.log('吃鸡成功')
12    break;
13
14    default:
15    console.log('很遗憾');
16}
17//注意：switch相当于if语句， 小心case穿透

while循环

循环三步走：

1.初始化循环变量

2.判断循环变量

3.更新循环变量

1//例子：打印1-9之间的数
2var i = 1;     //初始化循环变量
3
4while(i <= 9){    //判断循环条件
5    console.log(i);
6    i = i + 1;    //更新循环条件
7}

练习：将1~100所有是2的倍数在控制台打印。使用while循环

1var i = 1;
2while(i <= 100){
3    if(i%2==0){
4        console.log(i);
5    }
6    i +=1;
7}

do-while循环

用途不大：就是先做一次 ，上来再循环

1// 不管有没有满足while中的条件do里面的代码都会走一次
2var i = 3;//初始化循环变量
3do{
4
5    console.log(i)
6    i++;//更新循环条件
7
8}while (i<10) //判断循环条件

for循环

for循环遍历列表是最常用的对数据的操作！！！！！！

1//输出1~10之间的数
2for(var i = 1;i<=10;i++){
3     console.log(i)
4 }

练习：输入1~100之间所有数之和

1var sum = 0;
2for(var j = 1;j<=100;j++){
3    sum = sum+j
4}
5console.log(sum);

for循环嵌套的练习

document.write('');　　往浏览器文档中写

1for(var i=1;i<=3;i++){
2
3 　　for(var j=0;j<6;j++){
4        document.write('*')
5    }
6
7   document.write('<br>')
8 }

拓展练习：

11.在浏览器中输出直角三角形
2*  
3** 
4***
5****
6*****
7******
8
9for(var i=1;i<=6;i++){ //控制的行数
10   for(var j=1;j<=i;j++){ //控制的*
11      　　document.write("*")；
12   }
13
14     document.write('<br>')；
15}
16
17
182.在浏览器中输出 等腰三角形
19           *  
20          ***  
21        ***** 
22       ******* 
23      ********* 
24     ***********        
25
26for(var i=1;i<=6;i++){ //控制行数，一共显示6行 记得换document.write('<br>');
27
28        //控制我们的空格数
29        for(var s=i;s<6;s++){
30            document.write('&nbsp;');
31        }
32        //控制每行的输出*数
33        for(var j=1;j<=2*i-1;j++){
34            document.write('*');
35        }
36        document.write('<br>');
37
38   }

View Code

常用内置对象（复杂数据类型）

所谓内置对象就是ESMAScript提供出来的一些对象，对象都有相应的属性和方法。

数组Array

字面量方式创建（推荐大家使用这种方式，简单粗暴）

var colors = ['red','green','yellow'];

使用构造函数的方式创建 使用new关键词对构造函数进行创建对象,构造函数与后面的面向对象有关系

1var colors = new Array();
2//通过下标进行赋值
3colors[0] = 'red';
4colors[1] = 'green';
5colors[2] = 'yellow';
6console.log(colors);

• 数组的合并 concat()

  var north = ['北京','山东','天津']; var south = ['东莞','深圳','上海'];

  var newcity = north.concat(south); console.log(newcity);

• join() 将数组中元素使用指定的字符串连接起来，它会形成一个新的字符串

  var score = [98,78,76,100,0];

  var str = score.join('|'); console.long(str); //"98|78|76|100|0"

• slice(start,end); 返回数组的一段记录，顾头不顾尾

  var arr = ['张三','李四','王文','赵六'];

  var newArr = arr.slice(1,3); console.log(newArr); //["李四", "王文"]

• pop 移除数组的最后一个元素(有返回值)

  var arr = ['张三','李四','王文','赵六']; arr.pop(); console.log(arr);//["张三", "李四"，"王文"]

• push() 向数组最后添加一个元素

  var arr = ['张三','李四','王文','赵六']; arr.push('小马哥'); console.log(arr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]

• reverse() 翻转数组

  var names = ['alex','xiaoma','tanhuang','angle']; //4.反转数组 names.reverse(); console.log(names);

• sort对数组排序

  var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]

• 判断是否为数组：isArray()

  布尔类型值 = Array.isArray(被检测的值) ;

补充！！！！！ splice

1splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
2
3注释：该方法会改变原始数组。

http://www.w3school.com.cn/jsref/jsref_splice.asp

字符串string

• chartAt() 返回指定索引的位置的字符

  var str = 'alex'; var charset = str.charAt(1); console.log(charset);//l

• concat 返回字符串值，表示两个或多个字符串的拼接

  var str1 = 'al'; var str2 = 'ex'; console.log(str1.concat(str2,str2));//alexex

• replace(a,b) 将字符串a替换成字符串b

  var a = '1234567755'; var newStr = a.replace("4567",""); console.log(newStr);//123755

• indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样

  var str = 'alex'; console.log(str.indexOf('e'));//2 console.log(str.indexOf('p'));//-1

• slice(start，end) 左闭右开 分割字符串

  var str = '小马哥'; console.log(str.slice(1,2));//马

• split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度

  var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]

• substr(statr,end) 左闭右开

  var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.substr(0,4));//我的天呢

• toLowerCase()转小写

  var str = 'XIAOMAGE'; console.log(str.toLowerCase())；//xiaomage

• toUpperCase()转大写

  var str = 'xiaomage'; console.log(str.toUpperCase());//XIAOMAGE

特别：

1//1.将number类型转换成字符串类型
2var num = 132.32522;
3var numStr = num.toString()
4console.log(typeof numStr)
5//四舍五入
6var newNum = num.toFixed(2)
7console.log(newNum)

Math内置对象

• Math.ceil() 向上取整，'天花板函数'

  var x = 1.234; //天花板函数 表示大于等于 x，并且与它最接近的整数是2 var a = Math.ceil(x); console.log(a);//2

• Math.floor 向下取整，'地板函数'

  var x = 1.234; // 小于等于 x，并且与它最接近的整数 1 var b = Math.floor(x); console.log(b);//1

• 求两个数的最大值和最小值

  //求 两个数的最大值 最小值 console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//2

• 随机数 Math.random()

  var ran = Math.random(); console.log(ran);[0,1)

函数

函数：就是把一些语句进行封装，然后通过调用的形式，执行这些语句。

函数的作用：

• 解决大量的重复性的语句

• 简化编程，让编程模块化

  python 中声明函数

  def add(x,y): return x+y

  调用函数

  print(add(1,2))

  // js中声明函数 function add(x,y){ return x+y;
  } // js中调用函数 console.log(add(1,2));

解释如下：

• function：是一个关键字。中文是"函数"、“功能”。
• 函数名字：命名规范和变量一样。只能是字母，数字，下划线，美元符号，不能以数字开头。
• 参数：后面有一对小括号，里面是放参数用的。
• 大括号里面 是这个函数的语句。

伪数组 arguments

arguments代表的是实参。有个讲究的地方是：arguments只在函数中使用。

1fn(2,4);
2    fn(2,4,6);
3    fn(2,4,6,8);
4
5    function fn(a,b,c) {
6        console.log(arguments);
7        console.log(fn.length);         //获取形参的个数
8        console.log(arguments.length);  //获取实参的个数
9
10        console.log("----------------");
11    }

结果：

（2）之所以说arguments是伪数组，是因为：arguments可以修改元素，的那不能改变数组的长短。

1fn(2,4);
2    fn(2,4,6);
3    fn(2,4,6,8);
4
5    function fn(a,b) {
6        arguments[0] = 99;  //将实参的第一个数改为99
7        arguments.push(8);  //此方法不通过，因为无法增加元素
8    }

清空数组的几种方式：

1var array = [1,2,3,4,5,6];
2    array.splice(0);      //方式1：删除数组中所有项目
3    array.length = 0;     //方式2：length属性可以赋值，在其它语言中length是只读
4    array = [];           //方式3：推荐

对象Object

1. 使用object或对象字面创建对象
2. 工厂模式创建对象
3. 构造函数模式创建对象
4. 原型模式创建对象

使用Object或字面量方式创建对象

JS中最基本创建对象的方式：

1var student = new Object();
2student.name = "easy";
3student.age = "20";

这样，一个student对象就创建完毕，拥有2个属性name以及age，分别赋值为"easy"和20。

如果你嫌这种方法有一种封装性不良的感觉。来一个对象字面量方式创建对象。

1var student = {
2    name: "easy",
3    age: 20
4};

这样看起来似乎就完美了。但是马上我们就会发现一个十分尖锐的问题：当我们要创建同类的student1，student2，…，studentn时，我们不得不将以上的代码重复n次....

我们看”工厂模式”

工厂模式创建对象

JS中没有类的概念，那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用，同时可以给出特定接口来初始化对象

1function createStudent(name, age){
2     var obj = new.Object();
3     obj.name = name;
4     obj.age = age;
5     return obj;
6}
7
8var student1 = createStudent("easy1", 20);
9var student2 = createStudent("easy2", 20);
10...
11var studentn = createStudent("easyn", 20);

构造函数模式创建对象

在上面创建Object这样的原生对象的时候，我们就使用过其构造函数：

var obj = new Object();

在创建原生数组Array类型对象时也使用过其构造函数：

var arr = new Array(10);  //构造一个初始长度为10的数组对象

在进行自定义构造函数创建对象之前，我们首先了解一下构造函数和普通函数有什么区别。

1. 实际上并不存在创建构造函数的特殊语法，其与普通函数唯一的区别在于调用方法。对于任意函数，使用new操作符调用，那么它就是构造函数；不是用new操作符调用，那么它就是普通函数。
2. 按照惯例，我们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。如new Array()，new Object()。
3. 使用new操作符调用构造函数时，会经历（1）创建一个新对象；（2）将构造函数作用域赋给新对象（3）执行构造函数代码；（4）返回新对象     4个阶段

了解了构造函数和普通函数的区别之后，我们使用构造函数将工厂模式的函数重写，并添加一个方法属性：

1function Student(name, age) {
2  this.name = name;
3  this.age = age;
4  this.alertName = function(){
5    alert(this.name)
6  };
7}
8
9function Fruit(name, color) {
10  this.name = name;
11  this.color = color;
12  this.alertName = function(){
13    alert(this.name)
14  };
15}

原型的模式创建对象

1function Student() {
2    this.name = 'easy';
3    this.age = 20;
4}
5
6
7Student.prototype.alertName = function(){
8    alert(this.name);
9};
10
11var stu1 = new Student();
12var stu2 = new Student();
13
14stu1.alertName();  //easy
15stu2.alertName();  //easy
16
17alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数

Date日期对象

创建日期对象只有构造函数一种方式，使用new关键字

1//创建了一个date对象
2var myDate = new Date();

1//返回本地时间
2console.log（myDate().toLocalString()）;

JSON

概念简介:

JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是javascript原生格式，这意味着在javascript中处理JSON数据不需要任何特殊的API或工具包。

在JSON中，有两种结构：对象和数组。

• 对象

  var packJSON = {"name":"alex", "password":"123"};

• 数组

  var packJSON = [{"name":"alex", "password":"123"}, {"name","wusir", "password":"456"}];

数组是值的有序集合。一个数组以“[”开始，“]”结束。值之间运用 “,”分隔。

JSON对象和JSON字符串转换

在数据传输过程中，JSON是以字符串的形式传递的，而JS操纵的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：

• JSON字符串:

  var jsonStr ='{"name":"alex", "password":"123"}' ;

• JSON对象：

  var jsonObj = {"name":"alex", "password":"123"};

JSON字符串转换成JSON对象

var jsonObject = jQuery.parseJSON(joinStr)

JSON对象转换成JSON字符串

var jsonstr = JSON.stringify(jsonObject);

 遍历JSON对象和JSON数组

遍历JSON对象：

1var packAlex  = {"name":"alex", "password":"123"} ;
2
3for(var k in packAlex ){//遍历packAlex 对象的每个key/value对,k为key
4   alert(k + " " + packAlex[k]);
5}

遍历JSON数组代码

1var packAlex = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];
2
3for(var i in packAlex){//遍历packJson 数组时，i为索引
4   alert(packAlex[i].name + " " + packAlex[i].password);
5}