javascript学习笔记
简介
- javascript是什么？
JavaScript是一种运行在浏览器中的解释型、面向对象、事件驱动式的编程语言。 - javascript能干什么？
交互式操作；表单验证；网页特效；Web游戏；服务器脚本开发等。 - javascript有何特点？
事件驱动、跨平台、动态、交互式的操作方式 - javascript与ECMAScript的区别？
ECMAScript是一种语言标准，javascript是语言标准的实现。 - javascript执行方式？
解释执行（由上而下） - javascript执行平台？
web浏览器，浏览器有两大对象模型：DOM和BOM，js的最主要功能就是操纵这两个模型里面的东西
引入
- 直接嵌套在在网页的任何地方，一般放在标签中或者标签后，建议使用后者，因为js解释执行从上到下，可避免js代码延迟加载导致网页的显示。
- 将代码单独写在一个js文件中，通过在HTML中通过引入这个文件。
基本语法
注释
- 单行注释：//
- 多行注释：/* */
注意
- JavaScript区分大小写；
- 语句末尾不强制加分号；
变量声明
规则
- 可以用 _、数字、字母、$、组成 , 且数字不能开头，声明变量用var变量名来声明。
- 变量名也不能是JavaScript的关键字，如if、while等。
- 如果不写var时，则为全局变量
赋值
变量名 = 变量值;
变量作用域
- 全局变量：省略var，或在函数外声明，全局变量可在整个脚本中被使用，可在不同的窗口中相互引用（指定窗口名）
- 局部变量：在函数内声明
数据类型
- 数值：整数、浮点数，整数：由正负号、数字构成，八进制、十进制、十六进制，浮点数：由正负号、数字和小数点构成，常规记数法、科学记数法；
- 逻辑值：布尔值，true、false；
- 字符串值： 单引号、双引号；
- 空值： null
- 未定义值： undefined，根本不存在的对象、已定义但没有赋值的量；
- 数组：是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型,写法："[]" 包围 ,"," 号隔开每一个值，例如：[1, 2, 3.14, 'Hello', null, true];,还可以用Array()函数实现；
- 对象：是一组由键-值组成的无序集合，例如：var i = {'name':'leo','age':23};,可以通过i.name或者i.age获取一个对象的属性，即对象变量.属性名。后面会详细介绍。
运算符
- 算术运算符:+ - * / %（取余） ++（递增） --（递减）
- 赋值运算符:= += -= *= /= %=
- 比较运算符: != =（值及类型） !==（值及类型） < <= > >=
- 逻辑运算符:&& || !
- 拼接运算符：+
- 特殊运算符:1、new运算符：创建对象（实例）
格式：对象名称=new 对象类型（参数）
2、this运算符：表示当前对象
格式：this[.属性]
3、条件运算符：三元运算符
格式：<条件表达式> ? 第一个值：第二个值
语句
- 条件语句
有if...else和switch语句两种
//if语句
if(表达式){
语句
}else if(表达式){
语句
}else{
语句
}
//switch语句
switch (<表达式>) {
case <数值1>:<语句组1>
break;
case <数值2>:<语句组2>
break;
...
default <语句组>
}
- 循环语句
有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);
}
函数
- 函数概念：独立于主程序的、具有特定功能的一段程序代码块。
- 函数定义：
//一般函数
function 函数名([参数[,参数...]]){
<语句组>
[return <表达式>；]
}
//匿名函数
var fun=function(x){
if (x >= 0) {
return x;
} else {
return -x;
}
};
- 函数调用：
函数名([参数[,参数...]]);
<script>
function tell(name){
document.write("I am"+name);
}
tell("leo");
</script>
事件
-
定义：可以被 JavaScript 侦测到的行为，事件通常与函数配合使用，当事件发生时函数才会执行。
-
常见事件：onclick、onfocus、onblur、onmousedown、onselect、onsubmit
-
调用：浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理函数，完成事件处理过程。
对象详解
原则：在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
- 序列化：
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);
- 反序列化
JSON.parse('[1,2,3,true]');