Fork me on GitHub

JavaScript学习笔记(一)

基本介绍

HTML定义了网页的内容
CSS描述了网页的布局
JavaScript给定了网页的行为
  • 脚本语言 是用于web开发的脚本语言(往往不能独立使用,和html/jsp/php/asp/asp.net 配合使用、有自己的变量、函数、控制语句,顺序、分支、循环)。
  • 脚本语言即解释性语言,即在执行时候,直接对源码进行执行。
  • JavaScript 是脚本语言。轻量级、可插入HTML页面的任意位置、在客户端运行、由现代浏览器执行(Node.js可运行在服务端)。
  • 因为js是由浏览器来执行的,因此这不同类型的浏览器可能对js的支持不一样。
  • 通过使用<script>标签可在HTML页面中引入js,<script></script>会告诉js在何时开始和结束。
  • 在一个html文件中可以出现多对<script>片段,浏览器会按照先后顺序依次执行
  • js中的变量的数据类型是由js引擎决定的。
  • js严格区分大小写(标记语言不区分)。

js命名规范

  • 使用大小写字母、数字、_、$可以命名;
  • 不能以数字开头;
  • 不能使用js的关键字/保留字;
  • 区分大小写;
  • 单行注释使用 //,多行注释使用 /**/。
基本语法
  • window.prompt 请输入值对话框;
  • parseFloat()parseInt() 转换成浮点数、整数;
  • a++ 先判断再++;
  • ++a 先++再判断;
  • 逻辑运算中,0 、””、 flase、 null、 undefined、 NaN均表示flase
    js中非0的数都为True
  • || 返回第一个不为flase那个值(对象亦可),或者是返回最后一个值(如果全部是flase的话)。
控制语句
顺序控制
  • 对于编程而言,不控制其流程就是顺序执行。
分支控制
  • 单分支

    1
    2
    3
    if(条件表达式){
    //执行语句;
    }
  • 双分支

    1
    2
    if(条件表达式){
    }else{}
  • 多分支

    1
    2
    3
    4
    5
    6
    7
    if(条件表达式1){
    //执行
    }else if(条件表示式2){
    //执行
    }else if(条件表示式){//可以有多个else if
    }else{//可以没有
    }
  • switch

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    switch(表达式){
    case 常量1:
    //执行语句;
    break;//作用是跳出整个switch
    case 常量2:
    //执行语句;
    break
    ……
    default:
    //执行
    }
  • 数据类型可以是js支持的任何类型(数组对象除外)。
  • case后面的数据类型也可以任意(数组对象除外)。
  • break的作用是跳出整个switch。
  • 如果没有匹配的则执行default。
循环控制
  • for循环基本结构

    1
    2
    3
    for(循环初值; 循环条件; 步长){
    语句;//循环体
    }
  • while循环

    1
    2
    3
    while(条件表达式){
    //执行语句;
    }
  • do while

    1
    2
    3
    do{
    语句;//循环体
    }while(循环条件);

js函数

  • 函数是为完成某一功能的代码(语句,指令)的集合,当调用该函数时,会执行函数内的代码。
  • 基本语法
    1
    2
    3
    4
    function 函数名(参数列表){
    //执行代码
    renturn 值;//可以选择,实现函数将值返回到调用它的地方
    }
  • 一个程序中有可能具有相同名称的局部变量和全局变量,在这种情况下,局部变量会优先于全局变量。
  • 函数可以通过声明定义(使用关键字function),不是一个可执行语句,所以不以分号结束(函数声明后不会立即执行,会在我们需要的时候调用执行)。
  • 函数也可以通过一个表达式定义(var myvar=函数名),函数存储在变量中,函数表达式是一个执行语句,以分号结尾。
  • 函数声明后不会立即执行,会在我们需要的时候调用执行。
  • 提升应用在变量的声明(变量初始化不提升)与函数的声明(函数表达式不提升)。
    • 提升是JavaScript默认将当前作用域提升到前面的行为,因此函数和变量可以在声明之前调用。
  • 函数是对象,具有属性和方法。
    • arguments.length属性返回函数调用过程中接收到的参数个数。
    • toString()方法将函数作为一个字符串返回(调用方法:fuctionName.toString())。
  • 若函数定义作为对象的属性,称之为对象方法
  • 函数如果用于创建新的对象,称之为对象的构造函数

    1
    2
    3
    4
    function myFunction(name){
    this.name = name;
    }
    var myFun = new myFunction('John');
  • 关于接收函数返回值的问题

    1
    2
    3
    var myvar=test('abc');
    //如果test函数没有返回值,则返回的就是undefined;如果有返回值,则将返回值赋给myvar
    window.alert(myvar);

数组

  • 创建数组有三种方式:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //第一种方式:基本方法
    var arr=[元素值, 元素值, …..];
    //第二种方式:先定义再赋值
    var arr = new Array();
    arr[0] = 元素值;
    arr[1] = 元素值;
    ...
    //第三种方式:定义数组时同时赋值
    var arr = new Array(元素值, 元素值,...);
  • 元素的值可以是任意类型

    1
    var arr=[4,56,"hello world",true];
  • js的数组是动态增长的。
  • JavaScript不支持真正的多维数组,实现多维数组的方法:
    1
    2
    3
    4
    var t = new Array(5);
    for(var i=0; i<t.length; i++){
    t[i] = [];
    }
  • 对字符串分割,生成一个字符串数组(split函数)。
  • 数组有多种方法:sort、push、pop、unshift、shift、join、reverse、concat、slice、splice、toString等。

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
var bubbleSort = function(arr){
var len = arr.length;
for(var i = 0; i < len - 1; i++){
for(var j = 0; j < len - i - 1; j++){
if(arr[j] > arr[j+1]{
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
})
}
}
return arr;
}

快速排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//快速排序算法
var quickSort = function(arr){
if (arr.length <= 1){
return arr;
}
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for(var i = 0; i< arr.length; i++){
if (arr[i] < pivot){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
}

js面向(基于)对象编程

  • js中没有类class,但是它取了新的名字叫原型对象,因此类等同于原型对象。
  • js中的对象属性可以动态的添加。
  • 属性没有限制。
    1
    2
    3
    4
    5
    6
    function Cat(){//函数
    }
    var cat1 = new.Cat();//对象
    cat1.name = "xiaobai";
    cat1.age = "3";
    cat1.color = "write";
类(原型对象)和对象的区别和联系
  • 类是抽象的,概念代表一类事物。
  • 对象是具体的,代表一个实体。
  • 对象是以类(原型对象)为模板创建的。
创建对象的方式有五种
  • 工厂方法一使用new object创建对象并添加相关属性。
  • 使用构造函数来定义类(原型对象)。
  • 使用prototype。
  • 构造函数及原型混合方式。
  • 动态原型方式。

使用构造函数来定义类(原型对象)

访问对象的属性的方法有两种:
  • 普通方式:对象名.属性名。
  • 动态访问:对象名[“属性名”]。
    1
    2
    3
    4
    5
    6
    function person(){};
    var p1 = new person();
    p1.name = "John"
    window.alert(p1.name);//John
    var val = "na"+"me";
    window.alert(p1[val]);//John
删除对象的属性
1
2
3
delete 对象名.属性名//立即释放对象的属性空间
//或者
对象名.属性名 = null;
this
  • this只能在类定义的内部使用,不能在外部使用。
  • 对象-成员函数(方法)
给对象添加方法有两种方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//第一种方法
function 类名(){//构造函数
this.属性;
}
var 对象名 = new 类名();
function 函数名(){
//执行
}
对象名.属性名 = 函数名;
//这样就相当于把函数赋给 对象名.属性名,此时这个属性名就表示一个函数。
对象名.属性名();//调用函数

//或
对象名.属性名 = function(参数列表){
//代码
};
调用
对象名.属性名(实际参数);

/*
前面的方法有一个问题:
就是每个对象独占函数代码。这样若对象很多,则会影响效率.
js设计者,给我们提供另一个方法:
原型(prototype)法:多个对象可以共享函数代码
*/
//第二种方法
function Dog(){
}
var dog1 = new Dog();
//使用prototype类去绑定一个函数给shout
Dog.prototype.shout = function(){
window.alert("小狗");
}
dog1.shout();
var dog2 = new Dog();
dog2.shout();
== 与 === 的比较
  • 对于string,number等基础类型,==和===是有区别的:
    • 不同类型间比较,==比较”转化成同一类型后的值”后,看”值”是否相等;===如果类型不同,其结果就是不等。
    • 同类型比较,直接进行”值”比较,两者结果一样。
  • 对于Array,Object等高级类型,==和===是没有区别的:
    进行”指针地址”比较,地址相同则相等。

对象 object类

构造函数
  • 基本用法
    1
    2
    3
    4
    function constrFun(参数列表){
    this.属性 = 参数值;
    }
    var 对象名 = new constrFun(参数列表值);
直接创建对象
  • 如果一个对象比较简单,我们可以直接创建。
    1
    2
    3
    4
    5
    6
    7
    var dog = {
    name:'小狗',
    age:8,
    fun1:function(){
    window.alert('hello,world');
    }
    };
遍历对象属性
1
2
3
for (var key in History){//History为对象
console.log(key + ":" + History[key] + "</br>")
}
------ 本文结束 ------