javascript基础学习笔记

JavaScript是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只要支持它的浏览器即可。它的主要目的是验证发往服务器端的数据、增加Web互动、加强用户体验度等。

特点：
松散性：它的变量不具有一个明确的类型
对象属性：javaScript中的对象把属性名映射为任意的属性值。他的这种方式很像哈希表或关联数组，而不像C中的结构体或者C++、Java中的对象。。
继承机制：javaScript中的面向对象继承机制是基于原型的，这和另外一种不太为人所知的Self语言很像，而和C++以及java中的继承不大相同。

核心：1核心（ECMAScript）：组成部分有语法、类型、语句、关键字、保留字、操作符、对象等。
2、文档对象模型（Dom）3、浏览器对象模型（Bom）

javaScript会把页面上所有的元素标签看成对象
基于对象和事件驱动且相对安全的客户端使用的脚本语言。
使用javaScript的方式： 确定对象，确定属性、确定事件、用js实现功能

细小知识点
JavaScript变量：存储程序中用到的数据

变量的特点：1、一个变量只能存储一个数 2、变量存储的数据是可以改变的

变量的命名规则：1:由字母、数字、下划线、$ 组成 2:不能以数字开头：6a _ab $m7 3:严格区分大小写：num NUM 4:不能和javascriot中的关键字同门 var

数据类型分类：（特点：只能存储数据）
基本数据类型：① number类型：43+5.6（整数小数都是） ② string类型“ ”（字符串） ③ boolean类型（true、false） ⑥ undefined （未定义类型）
var（注：js是弱类型语言var定义变量时无论是什么类型都统一使用var定义。alert（typeof 变量名）;这条语句可以查看这个变量是什么类型的。）

引用数据类型：（特点： 是数据和功能（函数）的组合）
object（Object 是最基本的引用数据类型）、function、array、null

进制

var a=23//十进制 var b =010 //八进制 var c = 0x10//十六进制

二进制 八进制 十进制 十六进制
0 0 0 0
1 1 1 1
10 2 2 2
11 3 3 3
100 4 4 4
101 5 5 5
110 6 6 6
111 7 7 7
1000 10 8 8
1001 11 9 9
1010 12 10 a
1011 13 11 b
1100 14 12 c
1101 15 13 d
1110 16 14 e
1111 17 15 f
10000 20 16 10

01101101这样的二进制位称为：比特位

1byte(字节) = 8bit（比特位）
1k = 1024 byte
1M = 1024 k
1G = 1024 M
1T = 1024 G

为了表示数据简短：
八进制：每三个二进制位表示成1位 三位中最大的数：111是7， 7是八进制中最大的数。
十六进制：每四个二进制位表示成1位 四位中最大的数：1111是15（f），15是十六进制中最大的数。

进制的转换：10进制转成其他进制：反复除以进制值取余数，倒着读上去。
其他进制转成10进制：该数的每一位乘以进制值的相应次幂。110---> 0*2的零次幂+1*2的1次幂+1*2的2次幂 = 6（2进制转换成10进制）

连接符：“+”除了求和之外还有连接作用
例：var a = 6; var s = "hello" alert(s+a+a); -->显示的是hello66 alert(a+a+s); -->显示的是12hello
注意： 字符串类型和任何类型数据相连接，最终都是字符串。

转义字符：通过反斜杠“\”改变后边所跟字符的含义 例：alert（“张三说：\”你好\“”）;显示：张三说：“你好”

\n 换行 \t制表符 \\表示反斜杠

算数运算符：+ - * / %（取余数） ++ --
赋值运算符：+= -= *= /= =
关系运算符：> >= <= < ==（只比较数值，不比较类型） ===（既表示数值还表示数据类型是否一样） != !== 关系表达式的值是true或false
条件运算符：表达式？值1（true时）：值2(false时)
逻辑运算符：&& || ! (与或非)
使用逻辑与的结果（&&）
true && true --> true
true && false -->false

false && true --> false

false && false --> false

注：左边表达式是false时就确定最终就是false ，并且不再计算右边表达式的值（这种方式可以提高程序的运行性能 ）
alert（3&&6） --->6 alert(0&&6) --->0 如果左右两边是数值是：0相当于false，非0相当于true
alert("hello" && "world") -->world alert(""&&""hello")---->空 空字符串相当于false，非空的字符串相当于true
使用逻辑或的结果（||）
true || true --> true
true || false --> true

false || true --> true

false || false --> false

注：如果左边表达式是true时就确定了最终结果就是true，也不再计算右边表达式的值

typeof 运算符：判断变量是什么类型的

switch(表达式){
case 值1: 语句; break;
case 值2: 语句; break;

case 值1: 语句; break;
……
default：语句;break;
}
但遇到break或结束的有大括号时就会停止执行。case后边的值可以是常量，变量，表达式。

while(循环的条件){
需要重复执行的语句；
}
工作原理：先判断条件是否为真，如果条件为真，则执行循环体一次，然后再判断条件是否为真，如果为真则再执行循环体，如此反复，直到条件为假时循环结束，循环结束会继续执行下边的语句。

do{循环体；
}while(循环条件);
工作原理：先执行循环体一次，然后判断条件，如果条件为真则再执行循环体，然后再判断条件，条件为真则再执行循环体，如此反复直到条件为假循环结束。

嵌套循环：外循环控制的是行数，内循环控制每一行显示的内容。

document.write（“*”）；在页面上输出*

break ：结束其所在循环。
continue：结束的是本次循环，直接进入下一次循环。

flag标记：
flag:
for(var = 1;i<=5;i++){
for(var j=1;j<=5;j++){
if( j % 2 == 0)
continue flag;//结束的是外部循环
break flag;
}
document.write(i);
}

函数 就是用来解决相同的功能不用重复写多次的问题，用function来指明定义函数。(具备特定功能的一段独立的代码段)
function 函数名(参数。。。 ){
重复使用的代码；
return 值；
}

函数调用（什么时候用到这个函数的功能什么时候就去调用这个函数）
它调用的写法：函数名( );

自定义函数的考虑方式：1、是否需要返回值，2、是否需要参数

document.write（“*”）；在页面上输出*

递归：函数自己调用自己
return 结束函数的执行，直接返回到调用函数的位置
函数之间是可以相互调用的：每个函数都是独立的，平等的，
注意：
1、调用次数不要太多，否则会出现内存溢出现象（内存问题）
2、在使用递归时，一定要有让这个调用结束下来的条件（结束问题）

对象：把数据和功能封装在一起 对象.数据 对象.功能
创建对象的方式1：使用 new 运算符 通过new创建的都属于对象类型
function show(){
alert("show");
}
var obj = new object();
obj.name = "zhang";
让对象具有函数功能（obj.fun = 函数名；）
obj.fun = show;//定义对象功能
//使用对象
alert(obj.name);
obj.fun();

或者
obj.fun=function ( ){
alert("show");
}//匿名函数（没有函数名）
alret(obj.name);
obj.fun();

还可以
创建对象时可以省略new
var obj = object();
obj.age = 23;
obj.funct = function(){
alert("哈哈");
}
alert(obj.age);
obj.funct();

创建对象的方式2：字面量方式

function show(){
alert("hah");
}
var obj1 ={
name:"lisi",
age:23,
fun:show
}

var obj2 ={
'name':
"wang", //给变量加个单引号也可以
fun:function () {
alert("嘻嘻");
}
}

var obj3 = {}；//使用字面量的方式创建一个空的对象
obj3.name = "赵四";
obj3.ff = function () {
alert("嘿嘿");
}
//访问对象
obj.name;
obj.fun();

alert(obj3['name']);//与alert(obj3.name);是相同效果的
obj.ff();

两种数据类型的内存区别

基本数据类型的 变量 是在 栈 中开辟的

引用数据类型的 对象 是在 堆 中开辟的

基本数据类型的变量 直接存储的数据本身 而引用数据类型变量存放的是对象的内存地址。



举例 交换a b 的值 要用引用类型来做 相当于指针

数组：属于引用类型 在js中已经定义好了这种类型：Array（内部定义了可以存储数据的变量，还有具备某些功能的函数）
//使用new 创建数组
①var arr = new Array(10);//定义了一个可以存储10个数的数组（arr是对象类型）
该如何向数组中存放数据：



arr[0] = 5;//放数
arr[1] = 6;
alert(arr[0]+","+arr[1]);//取数

② var arr1 = new Array();//初始长度为0
arr[6] = 77;//但还可以改变数组长度
alert（arr1.length）;//arr1.length 存放的是数组的长度

③var arr2 = new Array("李四",45,true);//创建数组的同时给数组初始化数组，数组的初始长度就是数据的个数

④new可以省略
var a = Array(10); var b = Array(); var c = Array("李四",45,true);

数组特点：
1、数组的长度是可以改变的
2、数组中可以存储不同类型数据
3、在创建数组时new可以省略

//使用字面量方式创建数组

var arr3 =[ ];//空数组
arr3[0] = 66;

var arr4 = [1,2,3,4,5];
alert(arr4[2]); //3

var arr5 =[
{ name:"李四",
age:23,
fun:function(){
alert("哈哈")；}
}， //这个数组里面第一个是一个对象
[3,4,5,new object()], //这个数组中的第二个数 还是一个数组
"hello", //这是这个数组的第三个数 字符串
new Array("html","caa") //这是这个数组的第四个数 数组
]

arr5[0].fun();//访问数组中的第一个数的一个功能
alert(arr5[1]);//显示这个数组的第二个数的全部数据
alert（arr5[3][0]）； 显示的是这个数组的第四个数中的第一个数据

数组常用方法（函数）
//toString():把数组中的数据转成字符串并返回

var arr = ["liuneng",46,"小小","hahha"];
alert(arr);//内部自动调用了toString() 相当于-->alert(arr.toString);默认用逗号进行连接

//join():使用指定的分隔符把数组中的数据连接成字符串
alert(arr.join("/"));数组中的数会用/间隔

//push():向数组末尾添加数据，并返回数组的长度
arr.push("gao");
//pop:删除数组末尾的数，返回被删除的数据
arr.pop( );

//unshift():向数组开头添加数据，并返回数组的长度
//shift():删除数组开头的数据，返回被删除的数据

//concat():基于当前数组创建一个新数组并返回该数组
var a = arr.concat("非常搞笑")//不改变原来数组，加上这个“非常搞笑”之后形成一个新的数组啊
//slice():基于当前数组获取指定区域元素并返回一个新数组
var arr = ["xin",34,"小组"，“二十”];
var b = arr.slice(1,3);//从下标1的位置开始截取，直到下标3的前一个位置
alert（b）;//34,小组

//splice()：删除，插入，替换
var arr = ["xin",34,"小组"，“二十”];

var c = arr.splice(0,2);//从下标0位置开始取，取两个splice(开始取的位置下标，取的个数)
将取出来的内容从原来数组中删除，放到新的数组中
alert（c）;//xin,34
alert(arr);//小组，二十

var d = arr.splice(2,0,"hah");//从下标2的位置一个都不取就是在下标2的位置插入一个数据hah（插入）
alert(d);//中没有数据，因为没有删除数据
alert(arr);插入数据后的数组

var e = arr.splice(2,1,"啊哦");//从下标2的位置取一个数，删除，并让“啊哦”替换
alert（e）;//被删除的数据
alert(arr);//被替换后的数组

数组的排序

sort方法：返回一个元素已经进行了排序的Array对象。对原有数组进行排序。arrayobj是必选项，sortfunction是可选项，用来确定元素顺序的函数的名称，如果这个参数被省略，那么元素将按照ASCII字符顺序进行升序排列。(默认情况下，
sort方法是按照ASCII字符[a --97 A ---65 0---48]顺序排序的)

sortfunction参数提供了一个函数，那么该函数必须返回下列值之一：
1）负值，如果所传递的第一个参数比第二个参数小
2）零，如果两个参数相等
3）正值，如果第一个参数比第二个参数大
var a =[5,41,7,18];
function paixu(m,n){
if(m>n)
return 1;
else if(m<n)
return -1;
else
return 0;
}
这个函数还可写成

function paixu(m,n){
return m-n;
}

a.sort(paixu); //(函数之间可以相互调用)

时间和日期 js中提供了Date类型来处理日期和时间

获取系统当前日期和时间 直接创建一个Date类型的对象 GMT
var date = new Date();
var d1 = new Date(1000); 默认指的是1970年1月1日 08:00 走过1000毫秒的时间（毫秒数）
var d2 = new Date(“4/14/2008”); 内部调用了date.parse()方法在Date类型中调用parse方法，（Date.parse("4/14/2008")）这个方法的功能是得到毫秒数.

var d3 = new Date("May 3,2002");内部也是先使用date.parse

var d4 = new Date("Fri May 03 2002 00:00:00 GMT+0800");内部也先使用date.parse

如果输入错误时会显示 invalid Date 无效数据

解决兼容问题用date.utc()方法
Date.UTC() 方法也返回日期表示的毫秒数
UTC：国际协调时间（世界统一时间），（年份，月份（0-12），日期（1-31），小时（0-23）(东八区-8)，分钟，秒，毫秒）

Date.parse("1/1/1970 08:00:00");

Date中的方法

1、通用方法：
d.toString() 把日期转成字符串
d.toLocaleString() 转成本地格式来显示
d.valeof() 得到日期所对应的日期的毫秒数
2、日期格式化方法
d.toDateString() 得到年月日 星期 字符串（没有时分秒）
d.toTimeString() 得到时分秒字符串
d.toLocaleDateString() 本地格式的日期
d.toLocaleTimeString() 本地格式的时间
d.toUTCString() UTC格式的字符串
3、组件方法：单独获取想要的各种时间/日期的方法





alert(d.getMonth()+1);月份从0开始，想要显示的是现实一致的要加1
d.getUTCFullYear() 这样就是得到的UTC格式的
显示当前时间
var date = new Date();
alert(date.getFullYear() +"年"+(date.getMonth()+1)+“月”+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds+“秒”);

字符串
//object Array Date number(基本类型)----Number（对象类型）
bollean---Bollean string---String

var a = "abc";//基本类型 string类型
var ss = new String("abc");//object类型
“==”比较的是内容是否相等 而“===”比较的是类型以及内容是否相等
ss.length 是字符串的长度 a.length 也可以看成是对象
length 是在String中定义好的方法长度

ss.test = "hehe";（√）
a.test = "hehe";(X) 可以为对象定义属性和方法，而基本类型是不可以在重新定义属性和方法的
基本类型可以使用String内部定义的属性和方法

常用方法：
var ss = "abc123de&#*";

字符串中的每个字符都有一个索引，索引从0开始，
//charAt（index）:根据索引得到字符串中的某个字符
alert(ss.charAt(0)) ---> a
ss.charAt(ss.length-1); 这是显示字符串的最后一个字符
不要超出索引的范围 ss.charAt(-1) //(X) 返回空

charCodeAt（index）：返回索引对应的字符编码
根据索引得到索引对应的字符的编码
alert（ss.charCodeAt(3)）; //48

//打印字符串中每个字符以及字符对应的编码
var s = "bcdefg 0123456789 ABCDEFGH 中国你好！";
for(var i = 0;i<s.lenght;i++){
document.write("下标为"+i+"的字符是："+s.charAt(i)+"----->"+"该字 符的编码是："+s.chartCodeAt(i)+"<br/>");
}

String.fromCharCode()：根据编码生产字符串(是一个静态方法)
var str = String.fromCharCode(97,65,48,20320);
alert(str);

var ss ="*aweotttwiotttlskdjfttt";
indexof(str):默认返回在字符串中第一次出现的索引
var index = ss.indexof("ttt") ttt这个字符串在ss字符串中第一次出现的位置
alert(index);//5
indexof(str,position):返回从position 指定的位置开始在字符串中第一次出现的索引
str :是要查找的字符串 position：指定的位置开始在字符串中第一次出现的索引
var index2 = ss.indexof("ttt",8);
alert(index2);//11

lastIndexof(str):返回在字符串中最后一次出现的索引

var index3 = ss.lastIndexof("ttt");
alert(index3);//20

如果要找的字符串不存在的话他的返回值（索引值）为-1

验证邮箱是否合法
var email ="zhangsan.heh@qq.com"//含有一个@符号，@符号在.的前边
//首先判断是否含有@
if(email.indexof("@")>0){
//判断是否只有一个@符号
if(email.indexof("@") == email.lastIndexof("@")){
//判断@符号是否在第一个.的前边，且两个符号不挨着
if(email.indexof("@")+1<email.indexof(".",email.indexof("@"))){
alert("合法的邮箱");
}else{
alert("@不在.的前边，不合法");
}
}else {
alert("含有多个@，不合法");
}
}else alert("没有@，不合法");

截取例子：
var ss = "hello world 努力学习 abcdefg";

字符串的截取

subStr(index1,index2)第一个参数表示截取的起始索引，第二个参数表示截取的字符的个数

ss.substr(5); 返回的是截取出来的字符串 返回了一个新的字符串，而原有字符串是不变的
ss.substr(5,3);从索引5开始截取，截取3个字符

subString(index1,index2)第一个参数表示截取的起始索引，第二个参数表示截取的结束位置（不包含结束位置上的字符，到结束位置的前一位）

ss.substring(5,5); //会显示空 因第一个是开始位置，第二个是结束位置

ss.substring(5,6); //从5位置开始截取，截取到6的前一位

var str ="hellow world,hello kitty";
str.match("hello");//match 匹配的意思 返回的类型是对象类型，返回值是hello
match方法的功能：返回这个字符串str中第一个和hello匹配的字符串,以数组的形式返回，这个数组中只有一个字符串”hello“， 如果没有匹配的 那么match返回的是一个空对象（null）

str.search("hello") search是搜索的意思 返回的是第一次出现hello 的起始位置（0）

str.replace("hello","hehe");默认替换第一个（把str这个字符串中第一个和hello相同的字符串替换），返回一个新的字符串，原有字符串不变

字符串的切割 split(",")括号中的参数表示的是切割依据, 返回的是一个数组，将切割出来的字符串存在数组里面
var str ="zhangsan,wnangwu,lisi";
var arr =str.split(",");

toUpperCase();将小写转换成大写
toLowerCase();将大写转换成小写，，，，，这两个方法返回新的字符串，不改变原有的字符串

正则表达式：专门针对字符串来操作的
验证QQ号是否合法：5-15位，不能以0开头，全是数字
var qq ="5767890477"
if(qq,length>=5 && qq.length<=15){
if(qq.charCodeAt(0)!=48){
if(！isNaN（qq）){ //JS 提供了isNAN（）函数功能判断是否是
数字 是数字flase 不是数字返回值是true
alert("合法");
} else{
alert("不全是数字，不合法");
}


}else{
alert("以0开头，不合法");
}
}else
alert("长度不合法");



这是一种方法 还可以用正则表达式：验证qq是否合法
var reg = /[1-9][0-9]{4,14}/; //正则表达式以”/“开头，以”/“结尾【】第一位【】第二位
{} 第二位这样的数字最少出现4次，最多出现14次

reg.test(qq)//测试qq这个字符串是否符合正则表达式，符合返回true 否则返回false
正则表达式主要用来验证客户端的输入数据，用户填写完表单单击按钮之后，表单就会 被发送到服务器，在服务器端通常会用php asp .net等服务器脚本对其进行进一步处理，因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。（减少服务器端的资源的消耗）

正则表达式（regular expression）是一个描述字符模式的对象，ECMAScript (js)使用RegExp表示正则表达式
//创建方式有两种方法，一种 使用new 运算符，二种 使用字面量方式
1、使用new运算符 RegExp（string,pattern） pattern参数可选 意思为模式：可取的值 i:不区分大小写， g: 全局匹配 m:多行匹配（默认情况匹配一行）
var reg = new RegExp("hello")；
2、字面量方式
var reg = /hello/ ig; (reg = /***/ pattern;)

使用正则表达式进行验证的方式 1、 test() 2、 exec()
var reg = new RegExp("hello");定义正则表达式
var str = "hello world";需要验证的字符串
验证字符串和正则表达式匹配
reg.test(str);str写的是需要验证的字符串 作为参数传给test 将结果返回返回布尔类型 只要是 含有 匹配的 返回true 否则为false

var reg = /hello/;
var str ="hello world";
alert(reg.test(str));

exec()方法：

var reg = /hello/ i ; i是不区分大小写模式
var str ="Hello world";
alert(reg.exec(str));//也是将需要验证字符串传给exec,,,exec返回的是相匹配的字符串，返回的是数组对象，数组中含有的是和正则表达式匹配的字符串，若没有匹配的返回null



除了RegExp中的test()和exec()方法，String对象也提供了4个使用正则表达式的方法 pattern表示正则表达式
1、match(pattern) 返回 pattern 中的子串或 null 返回数组，数组中含有匹配的字符串
var reg = /hello/ i;
var str = "Hello world,Hello kitty";
str.match(reg); 返回的是匹配字符串的数组,默认只返回第一个匹配的字符串

var reg = /hello/ ig; g全局匹配
var str = "Hello world,Hello kitty";
str.match(reg); 这是返回的是所有和正则表达式匹配的字符串

2、search（pattern） 返回字符串中pattern 开始位置

var reg = /hello/ i;
var str = "Hello world,Hello kitty";
str.search(reg); 搜索符合正则表达式的 返回值是第一个和正则表达式匹配开始位置的索引 对于search来说g 没有什么意义，只找到第一个就返回

3、replace（pattern，replacement）用replacement替换pattern
替换

var reg = /hello/ i;
var str = "hello world,Hello kitty";
str.replace(reg,"hehe");
str.replace(正则表达式，用来替换的新的字符串); 把符合正则表达式的字符串，替换成第二个参数指定的新的字符串(默认只替换第一个符合正则表达式的字符串，如果都要替换，就加上全局匹配g)

4、split（pattern）返回字符串按指定pattern拆分的数组

切割 按照符合正则表达式的进行切割
var reg = /hello/ i;
var str = "hello world,Hello kitty";
alert(str.split(reg)); //返回的是一个数组 , world, ,kitty
str.split(reg).length;//3

空格也是字符 若以中括号这样的进行切割时 要进行一下转义 \[

正则表达式规则
. : 代表任意字符（换行除外）
var reg = /b..k/;
? :出现0次或1次， * ： 出现0次或多次 + ： 出现1次或多次
var reg = /bo?k/;
{m,n}:至少出现m次，最多出现n次, {m,}:至少出现m次 {m} :正好出现m次
var reg = /bo{2,3}k/;
[] : 限定某一位上字符的取值范围 [^] : 限定某一位上不能取的值

\d等价于[0-9] \D等价于[^0-9] \w等价于[a-zA-Z0-9_] \W等价于[^a-zA-Z0-9_]

var reg = /^book/ 匹配行手 /^/这个是^之后的字符串为str 的开头
var reg = /book&/ 匹配行尾

\s 匹配空白字符、空格、制表符和换行符
var reg =/java\sscript/
var str = "java script"

this|where|logo 匹配 this 或 where 或 logo 中任意一个
var reg = /javascript | html |css/;
只要匹配一个就true

0分组
var reg = /(javascript){2,4}/; javascritp 这个整体出现至少两次最多4次 （）中的看成一个整体
var reg = /(javascript){2,4}/;

var str = "study javascriptjavascriptjavascript"
alert(RegExp.$1); $1 来取组里面的值

var reg=/(.*)\s(.*)/;
var str = "hello world";
str.replace(reg,'$2 $1'); //把空格前边和后边两个分租进行交换(.*)(.*)

贪婪：+ * ？ {m,n} {m} 最大能够匹配到正则表达式的字符串（能匹配多少就匹配多少）
var reg = /6(.*)6/;
var str = "study 6js6 6js6 6js6";
alert(str.replace(reg,'$1'));//显示的是：study js6 6js6 6js

惰性：+? *? ?? {m,n}? {m,}? {m}? 最小能够匹配到正则表达式的字符串

var reg = /6(.*?)6/;
var str = "study 6js6 6js6 6js6";
alert(str.replace(reg,'$1'));//显示的是：study js 6js6 6js6

var reg = /6(.*?)6/g;//加上了全局g
var str = "study 6js6 6js6 6js6";
alert(str.replace(reg,'$1'));//显示的是：study js js js