前言:
现时姐妹们对“js文件php”大概比较注意,大家都想要知道一些“js文件php”的相关文章。那么小编也在网络上收集了一些有关“js文件php””的相关资讯,希望你们能喜欢,同学们一起来学习一下吧!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 包含浏览器的相关信息
标签: #js文件php #javascriptphp交互 #js正则冒号 #php正则问号 #js正则贪婪