- 博客(0)
- 资源 (3)
- 收藏
- 关注
JavaScript笔记
JavaScript:定义行为和动作
(基于对象和事件驱动的客户端脚本语言;也是一种广泛应用于客户端Web开发的脚本语言)
基于对象:网页中的一切元素都是假象!不需要new,即可直接使用
事件驱动:JavaScript的执行都是由事件引发
解释执行:先读到的先执行,后读到的会替代先读的
可以使用任何文本编辑工具编写 JavaScript 代码,然后由浏览器解释执行。
JavaScript常用于实现如下功能:
|--控制文档的外观和内容;
|--对浏览器的控制;
|--与 HTML 表单的交互;
|--与用户的交互;
|--执行计算等。
1.单击事件:定义在按钮的开始标签中
语法:onclick="js语句"
弹出警告:alert(‘字符串’)
强调:1.js区分大小写
2.字符串单双引号不区分
[removed]标签:页面中专门集中编写JavaScript的区域
js的方法定义:function方法名([参数列表]){
方法体
[return 返回值]
}
注意:js中的方法可以直接写在代码中,不需要“类”包裹
使用方法:方法名()-->方法调用-->立即执行
2.js文件:网页外专门保存js脚本的文件--推荐
强调:HTML、CSS、JS都要使用UTF-8编码保存(window系统)
使用js文件引入网页:[removed][removed]
强调:一旦定义src属性则其中的代码失效
解释执行:语句也可以直接写在js文件中,边解释边执行
3.***调试***
|--①.只有在执行时,才会报错
|--②.错误信息,浏览器页面看不到--没效果
| 解决:控制台--(工具-->JavaScript控制台或F12)
| 包含错误信息;指向错误位置的超链接
|--③.打桩:在指定变量位置输出变量或对象的内容
console.log(内容);-->出现在控制台-->日志
4.变量:js中的变量不需要提前指定类型,由赋值时动态决定
所有的变量都用var声明
5.数据类型:
|--String(字符串类型)
|--Number(数字类型)
|--Boolean(布尔类型)0、-0、null、""、false/undefined或NaN,则该对象设置为false。其余都可以当true
6.数据类型的隐式转换:
|--数字 + 字符串:数字转换为字符串
|--数字 + 布尔值:true转换为1,false转换为0
|--字符串 + 布尔值:布尔值转换为字符串true或false
|--布尔值 + 布尔值:布尔值转换为数值1或0
7.数据类型转换函数 :(方法前不需要对象调用的:全局函数)
|--toString():转换成字符串。所有数据类型均可转换为 string 类型;
|--parseInt():强制转换成整数。如果不能转换,则返回 NaN(not a number);
|--parseFloat():强制转换成浮点数。如果不能转换,则返回 NaN(Not a Number)
|--typeof():查询数值当前类型。
|--isNaN():判断是否为数字。返回 true:不是数字/false:是数字
| |--isNan(""):对空字符串不验证,直接返回false
| |--如果输入的是字符串类型的数字,返回false--不能判断数据类型,只判断内容
| |--如果输入的是boolean,返回false。因为boolean可以和number类型直接做计算
| |--和任何数字计算都得NaN;和任何数字作比较都得false
|--注:[removed]();节点输出,即在当前位置输出括号里的内容
*凡是从页面上进入js的都是字符串类型
8.查找元素:抓住根节点,就等于抓住整棵树
网页的根节点:document对象
要找元素,必须利用document对象(当前网页文件)
精确查找某个ID的元素:document.getElementById(id名);
9.null和undefined:
|--null:一个特殊的值,表示“无值”--空对象。数据类型为Object
|--undefined:表示声明了变量但从未赋值或者对象属性不存在
10.双等号(==)和全等号(===):
|--“==”为确定两个运算数是否相等,“==”运算符会进行类型转换。转换后运算数相等就返回true,否则返回false
|--“===”不执行类型转换,即,只有在无需类型转换运算数就相等的情况下,才返回true,否则返回false
|--附:if(null)、if(defined)、if(NaN)都相当于if(false)
-----猜数字游戏-----
失去焦点时,判断猜对猜错
获得焦点:onfocus 失去焦点:onblur
当事件就发生在获得内容的当前元素上:
this直接获得当前内容对象。可以代替当前对象完成一切操作,拥有当前对象的所有属性
前端优化:js中最好用三目运算代替if else
11.String:
|--查找:x.indexOf(‘关键字’[,开始位置下标])
| 每次只查找第一次出现的位置
|--替换:x.replace(‘关键字’[,‘替换内容’])--不会修改原x字符串
| 每次只替换第一次找到的
|--查找和替换所有:while循环
|
|--String 对象的常用方法有:
|--x.toLowerCase()、x.toUpperCase():大小写转换方法;
|--x.charAt(index):返回指定位置的字符;
|--x.charCodeAt(index):返回指定位置字符的Unicode编码;
|--x.indexOf(findstr,index)、x.lastIndexOf(findstr,index): 获取指定字符;
|--x.substring(start, end): 获取子字符串;
|--x.replace(findstr,tostr):替换子字符串;
|--x.split(bystr): 拆分子字符串。
|--String与正则表达式
|--str.match(regExp);--查找str中匹配正则表达式的关键字
| 返回:如果没找到,返回null。若找到,返回1个数组,数组的每个元素是每个找到的匹配关键 | |--str.replace(regExp,"替换值")--替换str中所有匹配的关键字
| 强调:replace方法不改变元字符串,只能返回新字符串。必须用变量接收新字符串
|
|--js中正则表达式语法:/正则表达式/[属性后缀]--其中属性后缀,g:全局匹配 i:忽略大小写(仅英文有效)
如果不适用模式匹配方式,将执行原文匹配
结果:如果正则表达式写错,也将执行原文匹配
12.Array笔试题:js中数组声明方式:
A new Array(7)
B new Array(7,‘a’,true)
C [7,'a',true]--js中所有[]都表示数组
D []--实例化一个空数组对象 实例化空数组:var arr=[];
特点:元素个数不限定,元素类型不限制
13.Array 对象的常用方法:
|--1.join()方法--用于把数组中的所有元素放入一个字符串
| eparato表示要使用的分隔符。如果省略该参数,则使用逗号作为分隔符
|--2.toString()方法--可把数组转换为字符串,并返回结果
|--3.concat()方法--用于连接两个或多个数组,该方法不会改变现有的数组
|--4.slice()方法--截取元素。根据给定的范围可从已有的数组中返回选定的元素
14.Function:js中一切都是对象,连方法都是1个对象!!
笔试题:js中方法定义集中方式:
A:function compare(a,b){return a-b;}---*可以任意地方声明方法*
B:var compare=function(a,b){return a-b;} ---|
--其实方法名也是方法对象的变量名;等号右边其实就是1个匿名方法对象 |--*必须在传递之前声明方法对象*
C:var compare=new Function('a','b','return a-b') ---|
--其实js底层就是new Function;构造函数中的参数都是字符串
结论:所有的方法都是function类型的。
15.JavaScript中的所有事物都是对象,分为三类:
|--简单对象:String、Number、Boolean
|--组合对象:Array、Math、Date
|--复杂对象:Function、Regex、Object等
16.Array排序:
|--升序:function compare(a,b){return a-b;}
|--降序:function compare(a,b){return b-a;}
比较器用法:arr.sort(比较器方法名);
遍历:for(var i=0;i<arr.length;i++)--等同Java
Array倒转:arr.reverse();用于颠倒数组中元素的顺序
17.Array元素操作:
|--arr.push(x);向数组增加1个新元素x(位于数组最后位置)
|--arr.splice(开始位置,删除几个[,x1,x2,x3...])
|--arr.indexOf(x) 返回x在数组中的下标---经常用于判断元素是否存在。如返回-1,x则不在数组中
18.Number对象:
|--x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字
|--x.toString():用于把一个 Number 对象转换为一个字符串,并返回结果
19.正则表达式对象:(专门用于查找和验证)
reg.test(‘要验证的完整字符串’)匹配返回true,否则返回false
强调:如果正则表达式使用了^和$,必须完整匹配才行。反之则部分匹配
20.Date对象:(计算方法:先get,再计算,最后set回去)
|--1.每个分量上都有一对get/set方法
|--2.命名:get|set年月日,单数;get|set时分秒,复数(s)
|--3.除了日期从1开始到31结束外,其余都从0开始到-1结束
|--Date对象的常用方法
|--1.获取日期数据 getDate()、getDay()、getFullYear()等
|--2.修改日期数据 setDate()、setDay()、setFullYear()等
|--3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等
21.argument参数:所有方法都隐藏的一个数组对象
作用:不设置任何的形参的情况下,自动接收所有传入参数
arguments.length:获得参数个数
arguments[i]:获得每个参数--都要判断和类型转换
22.全局函数:不用任何对象点(.)就可以调用--可用于所有的 JavaScript 对象
常用的全局函数有:parseInt/parseFloat、isNaN、eval、decodeURI/encodeURI等。
encodeURI和decodeURI:
|--encodeURI:可把字符串作为 URI 进行编码
|--decodeURI:decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码
eval() 函数可计算某个字符串,并执行其中的的JavaScript代码
23.BOM:操作浏览器窗口的对象模型。
--即浏览器对象模型 ,用来访问和操纵浏览器窗口,使 JavaScript 有能力与浏览器“对话”
DOM:操作网页中元素对象的对象模型--即文档对象模型,用来操作文档
window对象的常用属性:
|--document:窗口中显示的 HTML 文档对象
|--history:本次浏览过窗口的历史记录
| --前进:history.go(1);后退:history.go(-1);刷新:history.go(0);
|--location:窗口文件地址对象(地址栏)
|--event:事件对象
|--screen:屏幕对象
|--name:窗口名称
|--opener:打开当前窗口的 window 对象
|--navigator:有关浏览器的信息
|--cookieEnable:判断当前浏览器是否启用cookie
|--userAgent:获得浏览器的名称和版本号
window 对象的常用方法有:
|--alert();--警告框--只能点确认
|--confirm();确认框--可以选择确认或取消
|--prompt();对话框--用于显示可提示用户进行输入
|--window.open('url'[,'name']):打开1个选项卡
|--window.close():关闭当前选项卡
24.定时器:凡是网页中自动动态的效果都是用计时器实现的
|--周期性定时器:每隔一个时间段自动执行一次,循环执行
| |--setInterval() 启动-->用于启动一个周期性定时器
| 语法:timer=setInterval(方法名,间隔毫秒数)
|--clearInterval() 停止-->用于停止一个周期性定时器
语法:timer=clearInterval(timer)
|--1次性定时器:先等待一段时间,再自动执行一次,自动结束
|--setTimeout() 启动-->用于启动一个一次性定时器
|--clearTimeout() 停止-->用于停止一个一次性定时器
附:
|--表单控件,读写内容:.value
|--普通html元素,要想读写开始标签和结束标签之间的内容:[removed]
计时器:1.做什么事:方法;
2.一个变量:存计时器的线程号
3.何时启动计时器:事件
25.document:1.代表当前网页文档;
2.所有网页元素的根元素;
3.查找和操作元素,都要依靠document;
节点:nodeName--标签名或属性名
DOM操作样式:对象.className属性
等效于<标签class="">
DOM树:当前节点向上:txtObj[removed]()
向下:txtObj.getElementByTagName()
26.表单中查找控件对象:document.getElementsByName('name属性')
DOM增加新节点:两种方法
创建新节点:document.creatElement('标签名')
--此时新元素对象仅在内存中游离,页面看不见!
添加新节点:找到父元素!
|--appendChild() 方法只能将新节点作为某节点的最后一个子节点
| --此时新元素追加到了父元素的末尾
|--parentNode.insertBefore()(新元素对象,A)--其中A为新元素要插入位置的后一位元素
DOM删除元素:node.removeChild(childNode)--node为父节点,childNode为要删除的节点
27.HTML DOM
Select和Option对象:
select对象:代表HTML表单中的一个下拉列表,每个<select> 标签即表示一个 Select 对象
|--属性:
|--options:返回包含<select>元素中所有<option>的一个数组,每个元素对应一个<option>标签,索引从0开始
|--selectedIndex:设置或返回下拉列表中被选选项的索引号
|--size:设置或返回下拉列表中一次显示显示的选项数
|--方法:
|--add(option):用于向<select>添加一个<option>元素。
|--remove(index):从下拉列表删除选项
Select对象有事件onChange当改变选择时调用的事件句柄。Select对象的onChange属性引用了一个事件句柄函数。当用户选
中一个选项,或者取消了对一个选项的选定时,就会调用该句柄。这个事件不会指定新的选项是什么,必须通过Select对象的 selectedIndex属性,或者各个Option对象的selected属性来确定这一点。
option对象:代表HTML表单中下拉列表中的一个选项,每个<option>标签表示一个Option对象
|--创建:var o = new Option(text,value);
|--属性:
|--index:返回下拉列表中选项的索引位置
|--text:设置或返回选项的文本值;
|--value:设置或返回选项的值;
|--selected:设置或返回选项的 selected 属性的值,该属性设置选项的当前状态,如果为 true,则该选项被选中
28.table对象:
rows数组:表中所有行对象
方法:var row=table.iusertRow(i);--返回刚添加的新行
table.deleteRow(i); --i:行的下标。如果i取-1,即在表格末尾追加一行
tableRow对象:
cells数组:当前行中所有单元格的对象
方法:var 刚添加的新单元格=tr.iusertCell(i);
tr.deleteCell(i);
tableCell对象:取单元格内容--td[removed]
29.事件冒泡:
|--1.由外向内,捕获事件:记录哪级元素有什么事件
|--2.由内向外,冒泡执行:按记录的顺序由内向外执行
取消冒泡:
|--1.获得事件对象!--event
onclick="func(event)"--其中event和this都是关键字,表示事件对象
func(e)--此时e就是事件对象
|--2.取消冒泡:e.cancelBubble=true;
何时用:如果大量子元素拥有相同事件,应将相同事件统一定义在1个父元素上1次即可
2018-09-28
final、fianlly、finalize区别
final:修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为
父类被继承。因此一个类不能既被声明为abstract 的,又被声明为final 的。将变量或
方法声明为 final,可以保证它们在使用中不被改变。被声明为final的变量必须在声明时
给定初值, 而在以后的引用中只能读取,不可修改。被声明为final的方法也同样只能使用,
不能重载。
finally:再异常处理时提供finally 块来执行任何清除操作。如果抛出一个异常,那么相匹配的
catch 子句就会执行,然后控制就会进入finally 块(如果有的话)。
finalize:方法名。Java 技术允许使用finalize() 方法在垃圾收集器将对象从内存中清除出去
之前做必要的清理工作。这个方法是由垃圾收集器在确定这个对象没有被引用时对这个对
象调用的。它是在Object 类中定义的,因此所有的类都继承了它。子类覆盖finalize()
方法以整理系统资源或者执行其他清理工作。finalize() 方法是在垃圾收集器删除对象
之前对这个对象调用的。
2018-09-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人