JavaScript笔记

JavaScript

JavaScript基础

JavaScript语言的特点：

• 脚本语言：JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript可以直接执行。
• 基于对象：JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
• 简单：JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
• 跨平台：JavaScript只依赖于浏览器而与操作系统无关，目前JavaScript已被大多数的浏览器所支持。
• 嵌入式：需要在html页面上操作html元素，因此需要调用浏览器提供的操作html元素的接口（html dom接口），因此开发时要同时兼备html+css+javascript+dom的技能。

C/S结构应用程序与B/S结构应用程序：

• C/S结构： C/S是Client/Server的缩写。服务器通常安装数据库系统，而客户端需要安装专用的客户端软件与服务器进行交互。(例如word等软件无需服务器也可运行)

• B/S结构： B/S是Browser/Server的缩写，客户机上只要安装一个浏览器，服务器一般安装数据库、服务器软件。在这种结构下，用户界面完全通过浏览器向服务器上的服务器软件发送请求，服务器接收到请求后执行逻辑判断并返回相应信息。

Web开发：B/S结构软件、或网站的开发。

JavaScript的基本结构：

    <script type="text/javascript">
        //javascript代码写在这里。
    </script >

JavaScript的执行原理：

网页中引用JavaScript的方式：

• 内嵌：直接在<script></script>标签内部写。
• 外链：引用.js文件
  
  1. 创建my.js文件，在文件中写入：document.write(“Hello World”);
  2. 将my.js文件嵌入到HTML页面中。<script src="hello.js" type="text/javascript"></script>

JavaScript并行加载问题：

无论当前javaScript代码是内嵌还是外链，都必须一个一个的加载，而页面的下载和渲染都必须停下来等待脚本执行完毕。那么如果javaScript很多，加载与执行过程耗时越久，用户等待时间就越久。从IE8、firefox3.5、chrome2开始允许浏览器并行下载javasScript文件，也就是多个js文件并行下载。尽管如此，它仍然会阻塞其他资源的下载。因此，其中的一个简单解决办法就是：将代码放在body的最后。

注释：注释可分为单行注释与多行注释两种。

<script type=“text/javascript”>  
    // 我是单行注释，该语句功能在网页中输出内容
    /*    
    多行注释    
    养成书写注释的良好习惯
    */
</script>

声明变量语法：

    var num1 = 10;
    var num2;
    num2 = 10;
    //采用以下方法时会先到上下文寻找该全局变量，如果找不到会创建该全局变量
    num3 = 10;

数据类型：

• 数字类型（number）：包括整型和浮点型。
• 布尔型（boolean）：true 和 false。
• 字符串（String）：字符串必须写在一对双引号或单引号中。
• null：空指针（空对象）。
• undifined：派生自null，是window对象的一个属性。变量name没定义，或者没有赋初始值，将被赋予undefined（未定义）。
• 对象类型（Object）：包括 function、Arrsy、Date

typeof：符获取变量的数据类型。语法： typeof 变量名

算术运算符： +、-、*、/、%、++、--

数据类型转换：

• 强制数据类型转换：parseInt()、parseFloat()。
  
  • 注意：NaN：非数字的意思，是not a number的缩写。 NaN和任何数据进行运算结果仍然是NaN。因此，想要判断一个变量是不是NaN时，不能使用这种形式：a==NaN，而要使用isNaN(a);
• 隐式类型类型转化：
  
  • == ：先将比较的两个值自动转换成同一种数据类型，然后再进行比较。这就是隐式转换。
  • === ：不进行隐式转换的比较。如果两个值的类型不一致，那么直接返回false。

JavaSctipt判断语句

条件表达式中的比较运算符：<、>、<=、>=、==、!=、===、!==

其它真假值：
- true：非零数字、非空字符串、非空对象。
- false：零、空字符串、空对象、undefined。

多条件表达式中的逻辑运算符：&&、||、！

运算符的优先级：算术运算符 → 比较运算符 → 逻辑运算符 → 赋值运算符

• 算术运算符：++、--、*、/、%、+、-、
• 比较运算<、<=、>、>=、==、！、===、！==、
• 逻辑运算符：！、&&、||、
• 赋值运算符：=、+=、-=、*=、/=、

if语句：

if (condition1){
    statements1
} else if (condition2){
    statements2
} else {
    statements3
}

switch语句：

switch (condition){
    case value1:
        statemenments1
        break;
    case value2:
        statemenments2
        break; 
        ...
    case valuen:
        statemenmentsn
        break;
    default:
        statements
}

多重if else与switch语句的区别：
- 相同点：都能实现条件分支判断结构。
- 不同点：多重if else用于区间判断，switch用于等值判断。

三元运算符：condition ? value1 ? value2

||的另一种用法：value1 ||　value2如果值1为真那么返回值1，否则返回值2。

JavaScript循环语句

while、do while、for、break、continue与JavaSE一样。

JavaScript函数

声明函数语法：

function 函数名(参数1, 参数2, ..., 参数n){
    //函数体
}

函数的调用：

• 在JavaSctipt代码中调用。

• HTML文件中调用

  • 按钮调用

    <form>
        <input type="button" value="点击" onclick="add()">
    </form>

  • 超链接调用
    

    <a href="javascript:add()">调用函数</a>

**带参数的函数：**JavaScript中带参数和不带参数的函数在声明时一样，想要函数有返回值时只需在函数方法体最后加上return 变量即可。

不定参数-arguments：

function add(){
    var sum = 0;
    for(var i = 0; i< arguments.length; i++){
        sum += i;
    }
    return sum;
}

document.write(add(1, 2, 3));

变量的作用域：

• 全局变量：如果在任何函数定义之外声明了一个变量，则该变量为全局变量。
• 局部变量: 如果在函数定义内声明了一个变量，则该变量为局部变量。

匿名函数：

var sayHello = function(name){
    documents.write("hello " + name);
};
//调用
<input type="button" value="点我" onclick="sayHello ('Lisa')">

立即执行函数：

(function(){
    alert("立即执行");
})()

JavaSctipt数组

创建数组：

var 数组名 = new Array(); //创建数组时不指定长度
var 数组名 = new Array(长度值); //创建数组时指定长度
var num = new Array(66,80,90,77,59); //创建数组同时赋值
var num = [66,80,90,77,59]; //直接输入一个数组

注意：
1. 创建的新数组是空数组，没有值，如输出，则显示undefined。
2. 虽然创建数组时，指定了长度，但实际上数组都是可变长度的，也就是说即使指定了长度，仍然可以将元素存储在规定长度以外。
3. 注意：数组的length属性还可以赋值，而数组的长度会根据length的变化而变化。比如： num.length = 0; //清空数组

**数组中常用方法：**length()、 push()、unshift()、pop()、shift()、sort()、reverse()、concat()、join()、split()、splice()、slice()、

对数值进行排序不能直接使用sort()方法，要传入一个参数，而且这个参数是一个排序规则函数：

sort(function(num1, num2){
    return num1 - num2;
})

splice()使用方法：

• 从数组中间删除元素：splice(开始位置, 删除元素长度)
• 在数组中间插入元素：splice(开始位置,删除元素长度,新插入元素… …)
• 替换数组中某个元素：splice(开始位置,要替换的元素长度,替换元素… …)

slice()使用方法：

• 从数组中间截取一个片段：slice(开始索引，结束索引)
• 从数组中某个索引开始截取到最后：slice(开始索引)

JavaScript对象

创建 JavaScript 对象

通过 JavaScript，您能够定义并创建自己的对象。
创建新对象有两种不同的方法：
- 定义并创建对象的实例
- 使用函数来定义对象，然后创建新的对象实例

//这个例子创建了对象的一个新实例，并向其添加了四个属性：
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
//替代语法（使用对象 literals）：
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

//本例使用函数来构造对象：
function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}
 var myFather=new person("John","Doe",50,"blue");
 var myMother=new person("Sally","Rally",48,"green");

var persion=new Object();
persion.age=23;
persion.sex="male";
alert(persion.age);
var persion2={age:23,sex:"male"};
alert(persion2.age+" "+persion2.sex)
function persion3(age,sex,name){
    this.age=age;
    this.sex=sex;
    this.name=name;
    this.changeName=changeName;
    function changeName(name){
        this.name=name;
    }
}
var persion33=new persion3(24,"fmale","ll");
alert(persion33.name);
persion33.changeName("Lisa");
alert(persion33.name);  

JSON数据格式

JSON是JavaScript Object Notation的缩写，是一种轻量级的数据交换形式，它基于ECMAScript的一个子集。它是一种XML的替代方案，而且比XML更小，更快而且更易于解析。因为JSON描述对象的时候使用的是JavaScript语法，它是语言和平台独立的。

JSON 数据的书写格式是: (键：值 )

var obj = {name:"张三", age:25, sex:"男"};
alert(obj.name); //结果：张三
var obj = {
    name:["张三"、 "李四"、 "王五"] , 
    age:[25, 26, 24] , 
    sex:["男", "女", "男"]
};
alert(obj.name.length);  //结果：3
alert(obj.name[1]);  //结果：李四

在数组中使用JSON:

var obj = [
     {name:"张三" , age:25 , sex: "男" }, 
     {name: "李四" , age:26 , sex: "女"}, 
     {name: "王五", age:24 , sex: "男" }
];
alert(obj[1].name);  //结果：李四

JSON对象与数组：

• JSON对象是属性、值对的集合。一个对象的开始于“{”，结束于“}”。每一个属性名和值间用“:”提示，属性间用“,”分隔。
• 数组是有顺序的值的集合。一个数组开始于”[“，结束于”]”，值之间用”,”分隔。
• 值可以是引号里的字符串、数字、true、false、null，也可以是对象或数组或JSON对象。这些结构都能嵌套。
• 访问JSON对象的值要通过属性，访问数组的值要通过下标。

使用for in 遍历数组的弊端：虽然for in可以遍历数组，但一般情况下，遍历数组还是使用基础for循环最好。因为for in可能会将数组中我们不需要的其他属性也遍历出来。其次，for in遍历是没有顺序的。

var arr = [1, 2, 3];
arr.name = "bbb";
for(var item in arr){
     alert(arr[item]);
}  //运行结果：1   2   3   bbb

JSON与字符串之间的转换：

1. 将JSON对象转换成字符串：
   var obj = {name:"张三",age:25,sex: "男" };
var str = JSON.stringify(obj);
   注意：JSON对象在IE中不支持，如果要考虑兼容IE，那么只能使用js代码去拼接字符串。
2. 将字符串转换成JSON对象：
   
   • 第一种方式：
     var obj = eval("(" + str + ")");
   • 第二种方式（不兼容IE）：
     var obj = JSON.parse(str);
     注意：此方法要求JSON字符串中的属性也要带引号

JavaScript内置对象

String字符串对象

声明字符串对象有有两种方式：
1. 这种方式创建的对象是一个共享的全局字符串对象。
var city1 = "New York"
2. 这种方式创建的对象是一个新的、独有的字符串对象。
var city2 = new String("New York")

**String字符串对象常用属性和方法：**length、charAt(index)、indexOf(substr, index)、lastIndexOf(substr)、split()、join()、subString(begin [,end])、subStr(begin [,end])、toUpperCase()、toLowerCase()、search(rgExp, str)、search(rgExp)、match(rgExp)、

Date日期对象

日期对象可以存储任意一个日期，并且可以精确到毫秒。

方法	说明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHouers()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数(时间戳)

Math数学对象

常用方法：ceil()、floor()、round()、random()、abs()、sqrt()、max(x, y)、min(x, y)、

BOM模型与DMO模型

浏览器对象模型BOM（Browser Object Model）：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

文档对象模型DOM（Document Object Model）：定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。