JavaScript

试运行在浏览器端的,解释型的脚本语言

程序的运行方式:=>

->解释性: 每次代码运行时都需要解释器进行翻译-> JS,PHP

->编译型:编译一次,多次执行-> C , Java

JavaScript与Java没有任何关系,JavaScript最早是由网景公司

(NetScape)在其浏览器(NetScape N)中首次推出

组成部分=>

->ES : JavaScript的基本语法

->DOM :(Dodument Object Model)文档对象模型 允许JS与HTML

进行交互

->BOM :(Browser Object Model)允许JS与浏览器进行交互

作用:=>

->给网页添加动态效果;

->数据验证, 一般通过正则进行校验,一般是表单验证;

->相应网页的事件:

内容:=>

->ES:=>

->(ECMScript) 变量,常量,关键字,保留关键字, 运算符 ,数

据类型,流程控制语句,常见对象;

->引入方式:=>

->使用外部的JS文件:JS文件的扩展名是.js

->书写语法格式:<script type=”text/javascript”

src=’JS文件地址’>内</script>

在控制台输出:console.log(‘内容’);

在页面上输出:document.write(‘内容’);

在弹出框显示内容alert(‘内容’);

声明:=>

->JS严格区分大小写;

->JS每行代码结束时有结束的分号(;)

->文件名,可以是数字,字母,下划线,以.js作为扩展名,文件名

尽量有意义

变量:=>

->定义:存储在内存中的,有名称的信息,它的值可以在程序运行

时发生变化;

->语法:[ var ]变量名称[=变量值],变量名2=变量值2,…;

->声明:var关键字尽量不要省略,JS变量与PHP不同,JS变量不需

要$符;变量名必须以字母或下划线开头,包含数字,字母,下划线

,变量名中不能出现特殊字符–空格,斜线,反斜线等;禁止变量

名与关键字或保留关键字冲突;命名方式:尽量用小驼峰命名,尽

量见文知意

常量:=>

->语法:const 常量名=常量值;

->声明:建议常量名用大写

关键字:=>

JS现有语法中用到的一些单词, var if else switch case

break for while…

保留关键字:=>

在版本升级过程中,保留的关键字,现在可能没有在语法中使用,

但是在将来可能被使用,例如 class float integer bool….

变量类型:=>

->辅助函数:typeof(变量) 返回变量的类型;

-> 字符串 (string) 必须包含在单引号或双引号中

->boolean型:true/false;

->数值型( Number ):存储整型或浮点数,可以带有符号,二进制,

八进制(以0开头),十六进制(0x开头)#FFFFFF白色 #000000黑色

->未定义:(undefined)如果声明了变量,但是没有给变量赋值,

如果声明了函数,函数没有返回,则默认返回未定义undefined;

声明了变量,将变量赋值undefined;

->对象:(object)属性和方法的集合叫对象;判断对象是否属于

类(instanceof)=>if(arr instanceof Array){}

->空:null typeof->object也是对象

->函数:function (anonymous匿名)

运算符:=>

->数学运算符:+(正号)-(负号)+(加号)-(减号)*(乘)/(除)%(取

余)

->字符运算符:+ 将两个字符拼接;

->赋值运算符:=,+=(也可以当做拼接符,同.=),-=,*=,/=,%=;

->自增自减运算符:(i++,i–)先执行后运算,(++i,–i)先运算

后执行;

->比较运算符:>,<,>=,<=,==,===,!=,!==;

->逻辑运算符:||(or或),&&(and且),!(非);

->运算符的优先级:不明确优先级就加小括号

流程控制语句:=>

->if语句: if( 条件表达式 1){…}else if(条件表达式2)

{…}else{…}

->switch语句:适用于枚举类型 switch(条件表达式){

case 值1:

代码1;

break;

case 值2;

代码2;

break;

…

default:

代码;

break;

}

->while语句:

while(条件表达式){

代码;

}

先判断后执行

do{

代码

}while(条件表达式)

先执行后判断,至少执行一次

无序列表去掉黑点:list-style:none;

->for语句:

语法:for(表达式1;表达式2;表达式3){

代码;

}

表达式1:循环之前无条件的执行一次;

表达式2:每次循环开始时执行一次,用来判断是否进入循环;

表达式3:用来控制变量的步长(步幅);

count($数组) 获取数组元素的个数(PHP中)

sizeof($数组) 获取数组元素的个数,此两种功能相同但是函数

名不同,称为语法糖;

implode()将数组元素拼接成字符串

join()将数组元素拼接成字符串

获取数组个数: 对象.属性名称=>对象.length

在PHP中 对象->属性名称;

在js中 对象.属性名称

for…in:=>如同 foreach

for(别名 in 数组){

数组[别名]

}

对象:=>

->自定义对象:声明自定义对象 var obj=new Object() 构造函

数; var obj={} 直接声明方式

–>语法:=>

var obj={

属性名称1:属性值1,

属性名称2:属性值2,

….

}

对象中的多个属性之间用逗号分隔,最后一个属性不加逗号,属

性名称与属性值之间用冒号

属性名:一般是字符串;

属性值:JS中任意合法的数据类型

给对象赋值: 对象.属性名=属性值; 对象[属性名]=属性值;

访问(读属性):对象.属性名;对象[属性名](数组中就会有问

题);

->宿主对象:有ECMAScrip的宿主提供的对象就是宿主对象

DOM和BOM就是宿主对象,寄生在浏览器上

->内置对象:=>

->每一个内置对象都相当于PHP中的一个函数库;

String对象 对应PHP字符函数库

声明方法:直接声明 :var 对象名=”对象值”;

toLowerCase()将字符小写

toUpperCase()将字符大写

substr()截取字符:对象名.substr(起始索引,截取长度),第二

参数可以省略不写,默认截取到最后;对应PHP中substr(目标字

符串,截取起始索引,截取长度)或PHP中mb_substr();

slice():截取字符串,string目标字符串.slice(起始索引,结束

索引);

声明:返回的子串包含其实索引,不包含结束索引的内容,结束索

引可以是负值,那就是从后往前

var hi = “helloWorld”;

console.log(hi.slice(5, 9));

=>输出的是:Worl

字符替换:=>

replace() : 对应PHP中的str_replace()|preg_replace();

string目标字符串.replace(查找的内容,替换的内容);

声明:查找的内容可以是正则表达式;严格区分大小写!!!

indexOf() :返回子串在目标字符串中第一次出现的索引位置,

对应PHP中strpos();number目标字符串.indexOf(子串);

声明:字符串的索引从0开始,如果查找失败返回 -1;

var hi1 = “Hello:World”;

console.log(hi1.indexOf(‘l’));-> 2

lastIndexOf():返回子串在目标字符串中最后一次出现的索引

位置,对应PHP中strrpos();r=reverse反方向的

split():将字符串按照分隔符进行分割;对应PHP中的explode

()|preg_split()

返回的是一个array,array目标字符串.split(分隔符);

声明:查找的内容可以是正则表达式;

Array对象 对应PHP数组函数库

直接声明方式:var arr=[值1,值2…];

构造函数 :var arr=new Array();

声明:

属性:length 对应PHP中的count()|sizeof()

方法:

push():在数组的尾部(右侧)添加一个元素,返回新数组的长度;

对应PHP中的array_push()

unshift()[shift上档,向上弹出]头部追加元素,返回新数组的

长度,对应PHP中的array_unshift();

pop():在尾部弹出(删除)一个元素,对应PHP中的array_pop(目

标数组);

shift():在头部弹出(删除)一个元素,目标数组.shift();

join():可以把数组中的元素,拼接成字符串,对应PHP中的join

()|implode();返回结果是字符串,string数组.join(‘拼接形式

‘);

sort():对数组元素进行排序,对应PHP中的sort() asort()

ksort();array数组.sort([排序方式]),默认是空的,

concat():将多个数组合并成一个,对应PHP中array_merge(数组

1,数组2..);array数组.concat(拼接数组);

forEach()对数组元素进行遍历;

数组.forEach(function(元素值,元素索引){函数体});

Math对象 对应PHP数学函数库

->是JavaScript中的静态对象,直接通过Math访问属性或方法;

属性:Math.PI 圆周率;

Math.E 自然底数 ;

Math.SQRT2 根号2;只对于2起作用;

方法:Math.random();生成0-1之间的随机数,对应PHP中的

mt_rand(0,1),

Math.ceil(数字)向上取整;PHP中ceil();(ceil天花板)

Math.floor(数字)向下取整;PHP中floor();(floor地板)

Math.pow(底数,幂数):返回底数的幂次方

MYSQL中的整数类型:

tinyint 占1个字节 0-255 范围 -128到127

smallint 占2个字节 0-65535 范围

mediumintint:占3个字节 2^24次方1600多万

int:占4个字节 2^32次方 0-42亿+

bigint:占8个字节 最大

MAth.sqrt(数字):求根运算 Math.sqrt(2)->根号2的值;

Math.abs(数字):求数字的绝对值,对应PHP中的

Math.round(数字):四舍五入运算(保留到整数位);

Math.max(值1,值2…):给定值得最大值

Math.min(值1,值2…):给定值得罪小值

Number对象(数字) :=>

->对数值型数据进行运算

->属性:Number.NaN === 非数字(Not a Number)

Number.MAX_VALUE:JS中的最大数字;

Number.MIN_VALUE:JS中的最小数字;

Number.POSITIVE_INFINITY:正无穷,1/0正无穷;

Number.NEGATIVE_INFINITY:负无穷-1/0负无穷(Infinity无

穷);

toFixed(小数位数):把目标数字转成指定位数的小数位(四舍五

入到小数位);

toString([可选参 进制(直接是进制数字)]):把数字转换成指

定进制的字符串;如果要把数字截取,需要先转换成字符,然后用

substr(起始下标,截取长度)截取;

decimal(十进制)->DEC;octal(八进制)->OCT;

toExponential(小数点后的个数)科学计数法:

toPrecision(有效数字个数):

Date对象(日期):=>

->相当于PHP中date(‘Y-m-d H:i:s’)返回日期时间信息

声明:var 变量=new Date();

->方法:

getDay(),返回数字0-6;标记星期几

getFullYear()返回四位的年 number.对象.getFullYear();

getMonth()返回0-11,获取月份; number对象.getMonth(void(

空));

getDate()获取天数 返回1-31;number对象.getDate();

getHours()获取小时

getMinutes()获取分钟

getSeconds()获取秒

getTime()获取毫秒值;

getMilliseconds()截取毫秒数

获取以秒为时间的时间戳:

function getMyTime() {

var day = new Date();

var t = day.getTime().toString().substring(0,

10);

return parseInt(t);

};

console.log(getMyTime())

RegExp对象(正则):=>

具有特殊语法格式的表达式就是 正则表达式 ;

->声明:

直接声明:var partten=/正则表达式/[模式修饰符];

构造函数:var partten=new RegExp(正则表达式[,修正符]);

RegExp=>regular(正则) Expression(表达式)

区别:如果使用构造函数方式声明正则表达式,则某些特殊字符

需要转义:实例=>var pt=/\d+/; var pt=new RegExp(“\\d

+”);

->语法:

原子:正则表达式中具有意义最小单位;

元字符:具有特殊意义的原子就是元字符:\d匹配数字;\D匹配非

数字;\s匹配空格;\S匹配非空格;\w匹配单词[a-zA-Z0-9_];\W

匹配非单词[^a-zA-Z0-9_];…

量词:{n}精确匹配n位,{n,}匹配n到多位,{n,m}匹配n到m位,?匹

配0位或1位,*匹配0到多位,+匹配1到多位;

定位点:^(\A)匹配开头,$(\Z)匹配结尾;

选择路径:|或;

转义符:\ \n匹配换行(new line) nl2br(),\t匹配tab(制表符

);

字符组:正字符组:[a-zA-Z0-9_],负字符组[^a-zA-Z0-9_];

捕获组:表示子表达式 (子表达式);

修正符:i 忽略大小写,g 执行全局匹配;

匹配边界:\b

匹配非边界:\B

属性:ignoreCase 判断正则是否使用了修正符i;

global 判断是否使用了修正符g(JS中默认非贪婪模式)

方法:test() 匹配正则表达式,匹配成功返回true,匹配失败返

回false, 返回boolean型 正则对象.test(目标字符串);

匹配字符串:match() 对应PHP中的preg_match()或

preg_match_all();

Function对象(方法)

可以重复使用的代码段称之为函数 , JS中每个函数都是一个对

象;

直接声明 function 函数名([]参数]){函数体}

构造函数 var 变量 = new Function(参数1,参数2…最后一个

是函数体)

匿名函数 var 变量=function([参数]){函数体}

调用 变量([参数..]);

系统函数 : typeof() 获取变量类型;

DOM:=>

文档对象模型:JS将HTML文档(标签)转成JS对象来操作;

文档:HTML代码 -> HTML中的标签名称(部分属性)是不固定

的;XML代码 -> XML的大部分是固定的;

节点:HTML/XML中任意一个组成部分,都可以视为节点

document对象 每次载入的HTML文档就成为文档对象;

获取对象:1,document.getElementById(Id属性)->根据元素的

的ID属性获取该元素,参数->id属性;

2,document.getElementsByTagName(标签名)->作用:根据标签

名称获取参数对象;参数:HTML标签名称;返回:节点列表(数组);

3,document.getElementsByName(‘name属性’)->作用:根据name

属性获取元素对象;参数:name属性值;返回:节点列表(数组);

<a href=”” name=”alink”>百度</a>

<a href=”” name=”alink”>京东</a>

可读 对象.属性名 console.log(obj1[0].href);

设置属性 对象.属性名=属性值 console.log(obj1[0].href =

‘

对于HTML中,属性名与属性值形同的属性;在DOM中使用boolean

型来表示

(multiple,selected,checked,disabled,readonly,nowrap)

样式操作:=>

获取(读取) 对象.style.样式名称;

设置(写) 对象.style.样式名称=样式值;

批量修改样式:->

添加样式类:对象.className=”样式类名称,…”;

清空样式类:对象.className=”;

声明:对于样式名称中有锻钢的(background-color),JS会将

样式名称转成小驼峰(backgroundColor);

文本操作:=>

获取:对象.innerText; 对象.innerHTML;

设置:对象.innerText=值; 对象.innerHTML=值;

声明:innerText不支持HTML标签;innerHTML支持HTML标签;

链接中调用JS:=>

<a href=”javascript:JS的函数函数名()”>内容</a>

————————————————–

节点对象:

关系:=>

childNodes 孩子节点

firstChild 第一个孩子

lastChild 最后一个孩子

parentNode 父节点

previousSilbling 上一个兄弟

nextSibling下一个兄弟

方法:=>

document.createElement(HTML标签)->作用:创建新的节点对象

; 返回:节点对象;

对象.appendChild(新孩子节点) 向目标节点追加新的孩子节

点;

对象.removeChild(旧孩子节点); 删除目标节点的孩子节点,

删除时,从后往前删;

<标签 on事件=”事件处理程序”></标签>事件处理程序就是js函

数,一般是匿名函数;

对象.on事件=事件处理;

BOM:=>

浏览器对象模型

window 对象:表示一个包含DOM文档的窗口,在标签浏览器中,每

一个标签都有自己的window对象,其document属性指向DOM文档;

属性:

document 指向DOM文档;

innerWidth 当前窗口的内部宽度

innerHeight 当前窗口的内部高度

outerWidth 当前窗口的外部宽度

outerHeight 当前窗口的外部高度

方法:

alert(提示消息) 弹出窗口 window.alert()带有提示消息和

确认按钮的弹出窗口;

confirm(确认消息) window.confirm()带有确认消息和取消按

钮的确认框,如果点击确认,则返回true,点击取消则返回false;

prompt(“提示消息,表单默认值”) 带有输入表单的弹出框

var timer=setInterval(代码实现,时间间隔) 按照时间间隔(

以毫秒为单位),周期性执行代码实现,代码实现一般通过匿名函

数实现;

clearInterval(timer) 终止setInterval()的执行,参数为

setInterval()的返回结果;

var timer=setTimeout(代码实现,定时时间) 设置一个时间执

行’代码实现’,(触发以后,代码不会立即执行,等待定时时间后

才执行),’代码实现’一般是匿名函数;’定时时间’毫秒单位;

clearTimerout(timer)终止设定;

history对象:=>

包含了当前浏览器窗口访问过的URL历史记录

history对象时window对象的一部分;可以通过window.history

访问

属性:lenght 当前窗口的历史列表URL记录数

方法:

back() 加载历史记录中当前URL地址的上一个地址,对应浏览器

上的回退按钮;相当于go(-1)

forward() 加载历史记录中当前URL地址的下一个地址,对应浏

览器上的前进按钮;相当于go(1)

go(数字) 加载history历史列表中”数字”指定的页面,负数表示

会退的页面数,正数表示前进的页面数;

声明:数字的绝对值不能大于length属性(历史记录数);

location对象:=>

对应浏览器的地址栏;

location包含当前的URL信息,location对象是window对象的一

部分,可以直接访问;location对象对应PHP的parse_url()函数;

属性:href 获取当前地址 获取操作:location.href; 跳转操作

: location.href=URL地址;

location.protocol 获取访问协议

location.host 域名和端口号

location.hostname 域名

location.port 端口号

location.pathname 路径

location.search URL问号后面(?)的参数

location.hash URL中#后面的锚机

导航对象:=>(navigator)

获取浏览器的相关信息;获取浏览器的相关信息后,可以针对当

前的信息做专属设置;

属性:userAgent 包含浏览器的相关信息