主页 > 前端 > 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