JavaScript
2019-01-26 14:38:36 126 举报
AI智能生成
js基础总结
作者其他创作
大纲/内容
概述:是网景公司(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";
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浏览器对象模型 javascript: ; 这表示不刷新当前页面 配合 return false使用
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() 编码的字符串进行解码。
收藏
收藏
0 条评论
下一页