网站地图    收藏   

主页 > 前端 > javascript >

javascript小整理

来源:未知    时间:2022-09-29 09:48 作者:小飞侠 阅读:

[导读] JavaScript 概述:是网景公司(Netscape)开发的一种基于客户端浏览器(也常用于服务器端)、对象、事件驱动的网页(轻量级解释型)脚本语言。(一种行为控制,决定干什么事?)前身叫作LiveSc...


JavaScript

概述:是网景公司(Netscape)开发的一种基于客户端浏览器(也常用于服务器端)、对象、事件驱动的网页(轻量级解释型)脚本语言。(一种行为控制,决定干什么事?)前身叫作LiveScript

作用与优势:

通常用于浏览器,令开发者能透过DOM来操纵网页内容、或是透过AJAX与IndexedDB来操纵资料;  改善用户体验

电脑上的 Node.js 能让 JavaScript 作为脚本语言使用以处理自动化   减少服务器交互

可以组建完整的HTTP与Web Sockets服务器  立刻反馈结果

格式:

内嵌<script type="text/javascript"></script>

外联<script src="hello.js"></script>

javascript协议:<a href="JavaScript:alert('Hello World!!!')">请单击</a>

变量与数据类型

类型

基本类型

string(字符串型) "111"

number(数字类型)  整数1  浮点数0.1

boolean(布尔型)  true(真) false(假)

undefined(未定义值)  没有被赋值的变量

null(空值)   没有对象被呈现

复合类型

object(对象)

new创建一个对象实例化

this继承函数的原型  表示当前对象。  对象,构造函数,原型链与事件处理中的几种this略微不同,一般来说谁调用了它 this就指向谁。 

Array 数组

在JS中,数组不是数据类型,数组的数据类型其实就是对象,这是从“一切都是对象”的角度来诠释的。个人觉得还是要把它单独列出来

 typeOf判断数据的类型           转义字符: \\退格   \\f 换页   \\n 换行   \\r 回车 \\t制表符

运算符

算数运算

 除了简单的 +  -   *   /   %之外 应该注意区别递增/递减运算符  ++   -- 

i++,与++i,的区别:前者是先赋值再自加,后者是先自加再赋值 同理--也是一样

比较运算

  <   >   <=    >=    !=    ==(判断值是否相等)     !==     ===(判断值与类型是否相等)

字符串运算符  + ,+=,

逻辑运算

&&/and(逻辑与)   左右表达式均成立则为true         ||/or(逻辑或)  左右表达式一个成立则为true             !/not(非)  当为真时返回false,假时返回true

变量

规则:首字符必须是大写或小写的字母或下划线(_)或美元符($) ,变量名称不能是保留字和关键字  ,区分大小写

变量是什么?  用来临时存储数值的容器,变量存储的数值是可以变化的。

作用域:

局部变量:必须使用Var来声明变量,在函数内定义的就是局部的,否则就是全局的    局部访问全局使用作用域链

全局变量:省略var,在函数外声明, 在整个脚本中被使用,如果函数内的变量没有Var声明会直接影响全局的变量     全局访问局部可以使用闭包进行模拟

解释下为什么没有Var是全局变量?

在JS中,如果某个变量没有Var声明,会自动到上一层作用域去找这个变量的声明语句,假设找到!就使用。假设没找到!继续向上查找,一直找到全局作用域为止。如果全局中仍然没有这个变量的声明语句,那么会自动在全局作用域中自动声明。这个就是JS中的作用域链。

流程控制

分支语句:

if(表达式1){ 语句1 }else if(表达式2){ 语句2  }else{ 语句3  };  和 三目运算符相似  条件 ?结果1 : 结果2;    但又有不同! 三目运算符是先运算后赋值    if语句直接赋值,不存在运算

switch(变量) {case 值:  语句   break(阻止执行);   befault(相当于else):  (不存在时执行)语句  ;}   当值有固定的几种情况时,使用switch语句结构清新,执行效率高。

break; 默认直接退出当前循环体,也可以指定退出 层级

说下与contiue的区别:直接运行到循环体结尾。就是结束单次循环。break是结束整个循环体。

循环语句

for(初始表达式;判断表达式;变动量表达式) {执行语句;}   

特点:常用于 明确 循环次数时,条理清晰

while(表达式) {语句}    do{ 语句 }while(表达式)      两者的区别 : 后者先执行语句再判定

for (变量 in 对象 ) { 执行语句 }用于遍历数组与对象   实现一个对象的所有属性的遍历  

with()语句通常用来减少特定情形下必须写入的代码数量。在严格模式中不允许使用 with。会导致代码更难读取和调试,因此通常应当避免。

函数

函数的功能:1.代码重复性使用(封装) ,2.模块化编程(把大的程序分成若干个模块,多个模块封装在一个函数里)

函数语法: function  函数名(参数列表) { 函数执行部分; return 表达式;}

弱类型的数据类型可以来回自动转换,所以函数在定义的时候是不需要指定函数的类型的。

Javascript函数的声明 是没有返回值类型这一说法的

形参值的改变不会影响到实参。  在JS中,对象类型默认就是按地址传递。

匿名函数

变量(堆)是可以保存数据的,也可以保存地址的。函数名=首地址  变量名可以不断变化,函数可以不断被调用

自调用匿名函数

function(){ }  :相当于返回首地址       ( function(){ } ) :把这部分看成一个整体

( function(){ } ) () :相当于找到这个地址并执行

这种写法:可以避免代码中的函数有重名问题,代码只会在运行时执行一次,一般用作初始化工作

arguments的使用?

在函数内部可以使用,它表示函数的形参列表,以数组形式表现,arguments对象是所有功能中可用的本地变量。

arguments.callee  引用当前执行的函数       arguments.length 引用传递给函数的参数 

在使用函数递归调用时推荐使用arguments.callee代替函数名本身。当函数的参数列表不确定时可以通过aeguments来保存所有实参。其它时候不考虑!

说下 JS中 字符串的处理

substring() 方法用于提取字符串中介于两个指定下标之间的字符。不接受负数。

 substring(n,m)   意思是 索引  n  开始取  一直取到索引  m   注意 :不包含 索引为 m  的

slice() 方法可从已有的数组中返回选定的元素。和 substring 相同,但它接受负数

语法:stringObject.substr(start,length意思是 跳过 n 个取 m 个

        var s = "abcdef";


     s.substr(2, 1) ;  //跳过2个取1个  那么结果是c

JavaScript的词法分析!

JS中的script是分段执行的

1.读入第一个代码段

2.编译---指二进制的计算机语言                                                                                                                                       声明变量--声明函数--语法检查--语义检查--代码优化--分析并得到代码树 var  i; 

3.执行    i=数据 ;    以此类推  直到执行完毕

Array(数组)

什么是数组?

数组就是一组数据的集合,其表现形式就是内存中的一段连续的内存地址

数组名称 其实就是连续内存地址的首地址

JS中数组的定义?

无需指定数据类型,可以无需指定数组长度,可以存储任何数据类型的数据

创建数组的语法?

var arr=[值1,值2,值3] ; 隐式创建

var arr=new Array(值1,值2,值3);   构造函数的参数   直接实例化

var array=new array(3);    arr[0]=1;  arr[1]=2;  arr[2]=3;    array(3) 表示创建一个数组,它的长度为多少? 而不是下标0的值为3   常常会有些分不清

文本下标?

子主在PHP中,创建数组是就可以直接指定带有文本下标的元素

但在JS中,必须在创建数组之后创建带有文本下标的元素

在JS中,文本下标的数组元素,不计入数组长度。      数组对象可以通过“.”来引用文本下标的数组元素

如何遍历带有 文本下标 的数组元素?

js中,“文本下标不计入长度”,所以不能依赖length属性来进行遍历,文本下标的数组元素必须“通过for...in 语句进行遍历” for(var i in arr) { document.write(i+":"+arr[i]+"<br/>") }

arr.i  这样是错误的方式,会出事undefined    表示的是找一个i的属性,而不是把i当作一个变量来进行解析 

多维数组

 var arr=[ [], [] , []  ];       for(var i=0;i<arr.length;i++) {     for(var j in arr[i] ) {     } };    

事件编程

绑定事件的方式

行内绑定

<元素 事件 =“事件处理程序”>

<input type="botton" value="确定" onclick="display()"/>

动态绑定

结构+样式+行为页面分离

document.getElementById("").onclick="display()";

常用事件

onload    onblur    onclick       onmouseover     onmouseout        onchange       onkeyup        onsubmit

事件对象

加载事件

window.obload=function() { 函数名称(); } js代码后执行,通过“加载事件”实现加载过程

事件监听

  W3C:  addEventListener(type,callback,capture)    IE:attach(type,callback)

两者不同:

触发顺序:  W3C是先绑定 先触发   IE8及以下的浏览器则相反

事件名称不同:IE下事件名需要"on"前缀  W3C不需要。

解决监听事件的兼容性问题

function addEvent(obj,type,callback) {   if(window.attachEvent) {  obj.attachEvent("on"+type,callback);  }else{ obj.addEventListener(type,callback); } };

事件冒泡

指事件响应时会象水冒一样上升至最顶级元素(必须是相同事件才会触发),大多数情况下,程序需要对事件冒泡进行取消。

W3C: event.stopPropagation();//必须放在函数后面执行      IE:window.event.cancelBubble=true;

解决取消事件的兼容性问题

 function stopPropagation(ent) {    if(window.event) {   window.event.cancelBubble=true;  }else{    ent.stopPropagation(); } };

浏览器的默认行为

表单按钮点击时,用户资料填写不完整,我们需要将按钮的默认行为“取消”。

W3C: preventDefault(event);        IE:window.event.returnValue=false; 

解决兼容性

function prevent(ent) {    if(window.event) {    window.event.returnValue=false;  }else {  ent.preventDefault(); } };

DOM文档对象模型

介绍:

DOM:document  object   model  文档对象模型

DOM:就是利用javascript如何对html标签内容的“增”、“删”、“改”、“查”等操作。

DOM技术:

 php里边有:PHP语言 与 “XML”/HTML标签之间沟通的一个桥梁。

 javascript里边有:Js语言与“HTML”/xml标签之间的沟通的一个桥梁。

把html标签的内容划分为各种节点: 文档节点    元素节点    文本节点     属性节点     注释节点

通过getElementsByTagName收集的元素节点以“集合/数组”的形式返回

属性值操作

获取属性值

itnode.getAttribute(属性名称); 

只能操作w3c规定的属性

设置属性值

 itnode.setAttribute(名称,值);

属性节点获取

var attrlist=itnode.attributes  返回对应节点内部的全部属性信息,数组列表形式返回    attrlist.属性名称  //获得具体属性节点

判断节点类型:nodeType

1--->元素节点    2--->属性节点      3--->文本节点      9--->document节点 

节点创建与追加

节点创建

元素节点:document.createElement(tag标签名称);

文本节点:document.createTextNode(文本内容);

节点追加

 父节点:appendchild(子节点);

 父节点:insertBefore(newnode,oldnode);//newnode放到oldnode的前边

  父节点:replaceChild(newnode,oldnode);//newnode替换到oldnode节点

节点复制与删除

节点复制操作

被复制节点.cloneNode(true/false);     true:深层复制--->本身和内部子节点都复制     false:浅层复制--->本身(包括属性)节点被复制 

节点删除操作

父节点.removeChild(子节点);

DOM 操作 css样式只能操作“行内样式”,操作属性样式需要把"中横线"去掉,后边“首字母”大写。

事件操作

什么是事件

通过鼠标,键盘对页面所做的动作就是事件。事件一旦发生需要有事件处理,该处理称为“事件驱动”,通常由“函数”担任。

设置事件

DOM1级方式设置

<input type="text" name="username" onclick="函数名称()"/>     function 函数名称() {this[window] };

感觉只有这种用的相对多些,其它三种没怎么用,就不多说了

DOM2级方式设置

主流浏览器方式:

itnode.addEventListener(事件类型,事件处理[,事件流]); //设置

 itnode.removeEventListener(事件类型,事件处理[,事件流]); //取消

IE浏览器方式:

 itnode.attachEvent(事件类型,事件处理);  //设置

itnode.detachEvent(事件类型,事件处理);  //取消

DOM2级的特点及要求

1.事件取消必须是“有名函数”,不可以是匿名函数! 参数与判定的参数完全一致(数量/内容)! 

可以为同一个对象设置“多个同类型”事件。  事件取消也非常灵活。    对事件流也有很好的处理。

dom2级事件对象

相对于DOM1及对象来说简化了些,但都差不多 这里介绍些不同的

事件对象作用 获得鼠标的坐标信息

 event.clientX/clientY   event.pageX/pageY      //相对dom区域坐标,  后者给考虑滚动条 

event.screenX/screenY  //鼠标相对整个屏幕的坐标

感知被触发键盘键子信息   event.keyCode   通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。

BOM浏览器对象模型

window对象

alert():消息框     confirm():确认框     prompt():输入框

open():打开窗口   close():关闭窗口   focus() 获得焦点      blur() 失去焦点   print()打印   moveBy(x,y)相对移动   moveTo(x,y)绝对移动    resizeBy(x,y)    resizeTo(x,y)     scrollBy(x,y)    scrollTo(x,y)

setTimeout(表达式,毫秒)      设置定时器 执行一次         setInterval(表达式,毫秒)反复执行

clearTimeout(定时器对象)      清除定时器

navigator 浏览器信息对象

appCodeName :内部代码    appName:浏览器名称    appVersion  :版本号    platform:操作系统    onLine:是否在线   cookieEnabled:是否支持Cookie

location  地址栏对象

host :主机名     port:端口号    href :完整的URL信息     pathname:路径地址    protocol:协议    seatch :查询字符串        assign(url):用于页面跳转

 location.replace(location.href)

replace的页面每次都在服务端重新生成。

 location.reload()

重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做

screen屏幕信息对象

availheight 可用高度     availWidth 可用宽度     colorDepth 颜色质量

History 对象

javascript: ; 这表示不刷新当前页面  配合 return  false使用

history.back()前一个 URL  ,history.forward()下一个 URL,history.go(某个具体的页面)

document文档对象

document.getElementById(ID) id属性查找标签对象

document.getElementsByName(Name) name属性查找标签对象

document.getElementsByTagName(Name)  标签名查找标签对象

document.write() //动态向页面写入内容

lickColor超链接颜色     alinkColor 作用中的    vlinkColor作用后的超链接颜色     fgColor字体颜色

JS面向对象

发展史

 面向机器,--->面向过程:将程序的执行分解成若干个步聚。--->面向对象:将程序的执行分解成若干个事物

面向对象两个基本概念?  类:代表某类事物,是抽象的。   对象:代表某个事物,是具体的。

类的种类

系统类

string 类--> 字符串类-->隐式创建

length:取得字符串的长度      indexOf :取得参数在字符串出现的位置

replace(str1,str2):字符串替换          substr(start,length):截取字符串

toLowerCase() :转换为小写      toUpperCase() :转换为大写

Date类 -->日期类-->直接实例化

getFullYear() :返回年份   (getMonth()+1) :返回月份(0-11)   getDay():返回星期数(0-6)     getMilliseconds():返回毫秒数

 getDate():返回每月第几天      getHours() :返回小时数        getMinutes():返回分钟数      getSeconds() :返回秒数

math类 --> 数学类-->类的名称方法即可

random(数值):返回随机数 JS中,0---1之间的小数      floor(数值) :返回小于或等于该数的 最大整数        ceil(数值) :返回大于或等于该数的 最小整数         min(数值1,数值2) :返回最小数        max(数值1,数值2) :返回最大数   

round(数值):四舍五入     sqrt(数值):开平方根      pow(数值1,数值2) :返回数值1的数值2次方

自定义类

在JS中,没有类的定义语句,只有function,每一个function, 我们可以认为它是同名类的构造函数。

Function person-->它是Person类的构造函数,这种函数也叫构造器。

声明对象

 var 对象=new 类名();  开辟相应内存空间,在实例化时,直接执行了 类名 的构造函数。

对象属性的使用:

对象.属性;

对象[‘属性’];

 在JS中,对象的属性是动态添加的。可以是任何数据类型

 重点说明:在JS中,一切都是对象

 三个常用关键字:

constructor: 返回的是对象的构造器--*最复杂---原型对象<--->构造器

  typeof     :返回 数据类型

instanceof :判断对象 是否 是 某个类的实例

如果创建第二个 对象,不会拥有第一个对象的属性

创建一个对象时,会为这个对象开辟相应的堆空间,然后将这个对象产生的属性以及值 添加到这个对象所指向的 堆空间中,当创建第二个对象时,也会为它开辟对应的空间,但第二个对象所指向的堆空间是 空的,所以第二个对象不会拥有。

如果第一个对象 赋值 第二个对象 则 拥有!

将第一个对象 栈中保存的地址赋值给了 第二个对象,所以说,第二个对象也指向了第一个对象所指向的堆内存地址,两个对象指向了同一块堆内存,所以“改变一个对象的属性,会影响到别一个对象”---指的是“堆”中的属性

如果删除了第二个对象,不否会影响到第一个对象

p2=null---表示释放怕p2所占的 栈空间,但P1的空间仍然保留,P1仍然指向相应的堆空间,所以删除p2不会影p1对象。

JS中的this使用?

this的深入理解:所有的函数都是面向对象调用,普通函数的调用是由window对象调用。

程序中有个对象,我们在对其取值之后,如果不想保留这个对象中的某些属性,可以使用delete将这些属性“清除”-->只能删除自定义对象属性。

在类中,除了变量外的都是成员方法。 

 构造方法:对成员变量进行初始化的。是与类同名且没有返回值类型的方法。就是类构造对象时调用的方法,主要用来实例化对象。

json对象的使用

Ajax 返回大批量数据的方法:(1)Xml   (2)Json

什么是json ?

对象是指属性的无序集合,  一个对象是由若干个属性构成的,   这些属性是没有顺序的 。  所谓“集合”是指 名/值(成对出现的) 对  的集合

在JS中,可以使用 {} 来表示这个集合   创建出来的对象就是Json对象

 {属性名.属性值,属性名.属性值...}

使用json来创建对象的特点

使用json创建对象省略了构造器的定义     如果程序只需要一个对象---这时使用json来创建对象

prototype的使用

格式:class.prototype.属性----指为类下的“实例”添加的属性     class.属性-----指为类添加的静态属性

原理:当程序加载Person函数时,会为Person构造器创建Person原型对象,它们是独立存在的。构造器中有一个prototype属性指向了原型对象,原型对象中有一个constructor属性指向构造器,当Person类的实例在 使用一个不存在的属性是,会自动到Person构造器的原型对象中去找!

 alert(Person.prototype.constructor.prototype.constructor);

原型继承

原型是一个对象,它是object对象下的一个实例

object是所有类的父类

原型链

Person原型对象也是对象,当这个对象找不到某个属性时,回到object构造器的原型对象中去找,这个就是原型链。

通过构造器得到对象的特点

使用构造器可以简化属性的定义   如果程序需要多个相同属性或方法的对象---使用构造器来创建对象

函数闭包

什么是闭包?

所谓“闭包”指的是一个拥有许多变量 和绑定了这些变量的环境 的表达式(通常是一个函数) 因而这些变量也是该表达式的一部分。

闭包功能

访问局部变量

使变量所占内存不被释放

代码实现

私有属性

 在面向对象思想中,对于有些敏感的,不想公开的成员可以定义为私有的,在 javascript中可以模拟这个功能。

var:私有的       this:公有的     在js中,没有受保护成员!!!

call,apply的使用

call ( [thisOb j [,arg1 [,arg2 [,argN] ] ] ] )   第一个参数:函数执行时,this指向谁     后面的参数:根据“需要”顺序指定

 apply( [thisObj [,argArray] ] )     第二个参数:数组,表示参数集合

在js中,函数有几种调用形式:

 Person();  this-->window

var p1=new Person();   this-->p1

 per.Person();   this-->per

JS正则表达式

什么是正则表达式?

正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有“某种”子串、将匹配的子串做替换 或者 从某个串中取出符合某个条件的子串等。其本身就是一种语言,在其它语言是通用的

正则对象

要使用正则表达式,必须要在程序创建正则对象

隐式创建

var 对象=/匹配模式/匹配标志;

直接实例化

 var 对象=new RegExp(“匹配模式”,’匹配标志’);

像“\\d”这样的字符,需要转义"\\\\d"

匹配标志: g:全局匹配    i:忽略大小写   也可以动态获取val()值判断

几个重要的概念

子表达式:在正则匹配模式中,使用一对“括号”括起来的内容是一个子表达式

捕获:子表达式匹配到的“内容”会被系统捕获至“系统的缓冲区中”

反向引用:捕获之后,可以在匹配模式中使用:\\n(n表示数字)来引用系统的第n号缓冲区内容

编码知识

encodeURIComponent() 函数 与 encodeURI() 函数

unescape() 函数可对通过 escape() 编码的字符串进行解码。


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论