javascript基础

javascript学习笔记

简介

1. javascript是什么？
   JavaScript是一种运行在浏览器中的解释型、面向对象、事件驱动式的编程语言。
2. javascript能干什么？
   交互式操作；表单验证；网页特效；Web游戏；服务器脚本开发等。
3. javascript有何特点？
   事件驱动、跨平台、动态、交互式的操作方式
4. javascript与ECMAScript的区别？
   ECMAScript是一种语言标准，javascript是语言标准的实现。
5. javascript执行方式？
   解释执行（由上而下）
6. javascript执行平台？
   web浏览器，浏览器有两大对象模型：DOM和BOM，js的最主要功能就是操纵这两个模型里面的东西

引入

1. 直接嵌套在在网页的任何地方，一般放在标签中或者标签后，建议使用后者，因为js解释执行从上到下，可避免js代码延迟加载导致网页的显示。
2. 将代码单独写在一个js文件中，通过在HTML中通过引入这个文件。

基本语法

注释

1. 单行注释：//
2. 多行注释：/* */

注意

1. JavaScript区分大小写；
2. 语句末尾不强制加分号；

变量声明

规则

1. 可以用 _、数字、字母、$、组成 , 且数字不能开头，声明变量用var变量名来声明。
2. 变量名也不能是JavaScript的关键字，如if、while等。
3. 如果不写var时，则为全局变量

赋值

变量名 = 变量值;

变量作用域

1. 全局变量：省略var，或在函数外声明，全局变量可在整个脚本中被使用，可在不同的窗口中相互引用（指定窗口名）
2. 局部变量：在函数内声明

数据类型

1. 数值：整数、浮点数，整数：由正负号、数字构成，八进制、十进制、十六进制，浮点数：由正负号、数字和小数点构成，常规记数法、科学记数法；
2. 逻辑值：布尔值，true、false；
3. 字符串值： 单引号、双引号；
4. 空值： null
5. 未定义值： undefined，根本不存在的对象、已定义但没有赋值的量；
6. 数组：是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型,写法："[]" 包围 ,"," 号隔开每一个值，例如：[1, 2, 3.14, 'Hello', null, true];,还可以用Array()函数实现；
7. 对象：是一组由键-值组成的无序集合，例如：var i = {'name':'leo','age':23};,可以通过i.name或者i.age获取一个对象的属性，即对象变量.属性名。后面会详细介绍。

运算符

1. 算术运算符:+　　-　　*　　/　　%（取余）　　++（递增）　　--（递减）
2. 赋值运算符:=　　+=　　-=　　*=　　/=　　%=
3. 比较运算符:　　!=　　=（值及类型）　　!==（值及类型） <　　<=　　>　　>=
4. 逻辑运算符:&&　　||　　!
5. 拼接运算符：+
6. 特殊运算符:1、new运算符：创建对象（实例）

　　　 格式：对象名称=new 对象类型（参数）
2、this运算符：表示当前对象

　　　 格式：this[.属性]
3、条件运算符：三元运算符

           格式：<条件表达式> ? 第一个值：第二个值

语句

1. 条件语句
   有if...else和switch语句两种
   //if语句

    if(表达式){
        语句
    }else if(表达式){
        语句
   }else{
    语句
}

//switch语句

switch (<表达式>) {
    case <数值1>:<语句组1>
                 break;
    case <数值2>:<语句组2>
                 break;
    ...
    default <语句组> 
} 

2. 循环语句
   有for、while、do...while、for...in语句
   //for语句,常用于利用索引来遍历数组

for (<初始表达式>；<条件表达式>；<变动量表达式>){
    <语句组>
}

var arr=['a','b','c','d'];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

//while语句

while (<表达式>){
    <语句组>
}

//do...while语句

do {
    <语句组>
} while (<表达式>) 

//for...in语句

for ( 变量 in 对象 ){
    <语句组>
} 

var i={
    name:'leo',
    age:'27',
    city:'shanghai'
};
for(var key in i){
    console.log(key);
}

函数

1. 函数概念：独立于主程序的、具有特定功能的一段程序代码块。
2. 函数定义：
   //一般函数

function 函数名([参数[,参数...]]){
    <语句组>
    [return <表达式>；] 
} 

//匿名函数

var fun=function(x){
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

3. 函数调用：
   函数名([参数[,参数...]]);

<script>
    function tell(name){
    document.write("I am"+name);
}
tell("leo");
</script>

事件

1. 定义：可以被 JavaScript 侦测到的行为，事件通常与函数配合使用，当事件发生时函数才会执行。

2. 常见事件：onclick、onfocus、onblur、onmousedown、onselect、onsubmit

3. 调用：浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理函数，完成事件处理过程。

对象详解

原则：在js中一切皆对象

Date对象：

var date=new Date();
date;
//格式：日期对象名称.方法（[参数]）
date.getFullYear();//2016 年份
date.getMonth(); // 月份，注意月份范围是0~11，5表示六月
date.getDate(); // 日期
date.getDay(); //  表示星期几
date.getHours(); // 小时, 24小时制
date.getMinutes(); //  分钟
date.getSeconds(); // 秒
date.getMilliseconds(); // 毫秒数
date.getTime(); //  以number形式表示的时间戳
/**
*其他方法
Date.parse(日期字串) 返回对应日期基线的毫秒 
setTime(时间值) 指定一日期对象的值 
toGMTString() 以GMT格式表示日期对象 
toUTCString() 以GMT格式表示日期对象 
*/

数组对象

/**
*
*新建数组
　　1. 数组对象名称=new Array([元素个数])
　　2. 数组对象名称=new Array([[元素1][，元素2，...]])
　　3. 数组对象名称=[元素1[，元素2，...]]
*/
var j = ['A', 'B', 'C', 1, 2, 3];
var arr = ['A', 'B', 'C'];
var s=new Array('apple','orange','banan');
    s.length;//数组的属性length
    s.indexOf('orange');//搜索一个指定的元素的位置
    s.slice(0,1);//截取Array的部分元素，然后返回一个新的Array：
    s.push('A', 'B');//向Array的末尾添加若干元素
    s.pop();//把Array的最后一个元素删除掉
    s.unshift('hello'); //往Array的头部添加若干元素
    s.shift();//把Array的第一个元素删掉
    s.sort();//默认排序
    s.reverse();//数组翻转
    s.splice();//从指定的索引开始删除若干元素，然后再从该位置添加若干元素
    arr.concat([1, 2, 3]);//当前的Array和另一个Array连接起来，并返回一个新的Array：
    j.join('=');//当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

面向对象

三大特性：封装、继承、多态

注意：1. JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。
2. JavaScript的原型链和Java的Class区别就在，它没有“Class”的概念，所有对象都是实例，所谓继承关系不过是把一个对象的原型指向另一个对象而已

其他

JSON

1. 序列化：

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '"W3C" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};

JSON.stringify(xiaoming);

2. 反序列化

JSON.parse('[1,2,3,true]');