1/什么是JavaScript:一种基于对象和事件驱动的客户端技术,常用于实现网页的客户端动态效果
2/实际适用范围:动态效果/客户端验证/动态页面元素/浏览器端技术/ajax
3/javascript语言:标准语言规范,第三方框架,Jquery/ajax
4/基础js中:基础语法/dom/bom/对象数据封装
5/如何书写Javascript代码---嵌入到html页面,由某个事件引发
某个事件里去调用某个方法:onclick alert()
某个位置封装,事件里调用
<head>里的<script>元素中:不能被其他页面共享,代码多难以维护
代码位于单独的js文件,由页面引入:<script src="">
6/常见的语法规则:
注释
标识符的构成:字母/数字/下划线/$构成,不能以数字开头
大小写敏感
7/变量与数据类型
基本类型:string/number/boolean/null/undefine
复杂类型:Array/Math/Object...
弱类型的语言:声明的时候不需要指定类型,实际类型以赋值为准
声明变量:var i = "aaa";
var j = 100;//100.12
var k = true;
变量之间使用==比较时:value
严格相等:=== value/type
先判断变量的类型:typeof
8/数据类型的转换
直接转换:
数值与字符串:字符串
数值和bool:数值
bool和字符串:bool变为true/false的字符串
转换方法:
parseInt/parseFloat:值确实为数值
toString
如何判断是否为数值:NaN: not a number
isNaN:is not a number
控制语句:
条件:if/else switch/case
循环:for/while
for(var i=0;i<6;i++)
得到界面文本的值:
input 需要id
document.getElementById("").value
9/常用对象
String对象
长度属性:length
方法
substring(start,end):不包含end位置的字符/end是真实的结束位置加1
split("|"):拆分 a,b,c,d
toLowerCase/toUpperCase
charAt
indexOf/lastIndexOf
replace(findStr,replaceStr)
功能简单,实现对于指定字符串的一次替换
功能复杂:结合正则表达式
search(findStr)---index > -1
match(/\d+/)
Array对象
创建: var r = new Array();
赋值: [index]
简写办法:var r = new Array(11,12);
var r = [11,2];
创建二维数组:数组的数组
var r = new Array();
r[0] = [1,2,3];
r[1] = [4,5,6];
属性: length
方法:
输出数组内容
toString():数组内容以逗号连接的字符串形式
join(""):数组内容以指定字符连接的字符串形式
合并数组
arr1.concat(arr2),返回大数组
截取子数组
arr1.slice(start,end):index,且end不被包含
数组的排序
sort(Func对象):默认按照字符串的大小比较
数组的倒转
reverse()
Math对象
属性:
方法:
round/random/floor/ceil--32.21
pow(x,y)
sin/tan
Function对象
函数:使用function关键字定义方法
参数 function MethodName(p1,p2)
返回值 return value;
方法的重载问题
js中没有方法的重载,方法名相同,覆盖,以最后定义的为准
arguments
方法中使用它,它代表实际参数的数组
匿名函数
=function() {};
正则表达式对象 [a-z]{3}
结合string对象的三个方法使用:操作字符串
正则表达式对象:验证
var reg = /\d{3}/;----正则表达式对象
reg.test(string)----bool
Date对象:
创建:var d = new Date();
getXXX:getMonth
setXXX
toXXX: toString/toLocaleTimeString
10/DOM--document object modal---动态的安排页面元素
将整个文档作为一个节点树
找到目标元素节点:
单个节点:getElementById
某类节点:getElementsByTagName---标记名称
其他方法:obj.parentNode/nextSibling
操作某个节点:将html标记对象化
修改文本
使用属性写文本:.value,比如
<input type="text" value="">
标记之间写文本: .innerHTML
比如 span/div/label/li/h1/p
修改样式:集合属性子属性作为style属性的属性存在
o.style.color---修改单个样式
o.className = "";---修改所有样式
添加新元素节点
createElement
appendChild(new):追加,作为最后一个
insertBefore(new,refNode)
替换旧的子节点
目标节点的父节点.replaceChild(new,old)
删除
目标节点的父节点.removeChild(target);
联动菜单/选择
获取下拉框的数据
obj.selectedIndex
obj.options
obj.options[2]
操作表格:显示批量数据
封装后的方法:
table.insertRow(index)/deleteRow(index)
row.insertCell(index)/deleteCell(index)
11 BOM--browser
将整个窗口的内容作了封装
window
document: document.getxx===window.document.getXX
location:地址栏
navigator:浏览器软件的信息
history:历史访问记录
screen:屏幕信息
window对象的方法
open(url,name,config);---返回新打开的窗口对象
config:toolbar menu status
close()
focus()
定时器
周期性:每隔一定时间就触发执行某段代码
setInterval(func对象,ms)---返回启动的定时器对象
clearInterval(定时器对象)
一次性:间隔指定时间出发代码,只触发一次,倒计时的效果
setTimeout(func对象,ms)--返回
clearTimeout()
对话框
alert()
confirm(提示信息)--返回bool类型的操作结果
prompt()---能够录入数据的对话框,返回数据或者null
常用属性
window.status = "sfdf";
opener
location对象:地址栏---替换旧页面
属性 location.href--得到或者设置url
方法
location.replace(url)
location.reload()
history对象:----历史记录
属性 length alert(history.length);
方法
history.back();
history.forward();
screen对象:----屏幕信息
width/height
document对象:----文档
DOM操作的方法
document.write():重写当前文档,可以书写html标记
navigator对象-----浏览器
appVersion
12 事件
事件的类别
鼠标事件
onclick
ondblclick--double
onmouseover
onmouseout
键盘事件
onkeyup
onkeydown
状态事件
onblur
onchange 选择的值发生改变
onload 常用于body
onsubmit 用于form
事件的特征
任何事件里return false,取消事件
冒泡机制:如果对于嵌套的元素定义了相同的事件,底层向上层层触发
event.cancelBubble = true/false
event对象的使用
event:发生事件,封装相关的数据
Firefox里,需要在界面的代码中传入event: οnclick="M(event);"
IE等其他浏览器中:方法中使用event,也可以传入
位置:
event.clientX/clientY
引发事件的元素
event.srcElement----
event.target----firefox
为了实现兼容性: event.srcElement || event.target
判断元素的类别
nodeName--节点的名称(html标记的名称)
为元素添加事件
静态添加:<input onxxx = ""
动态添加:
obj.onclick = func对象;
obj.onclick = function() {};
13 数据的封装--部分面向对象的语法
方式一:使用Object对象
var p = new Object();
p.属性名称 = value;
p.方法名称 = func对象或者匿名函数;
方式二:自定义对象
var p = new Student("mary",18,true);
方式三:Json语法
var p = {"name":"mary","age":18};
2/实际适用范围:动态效果/客户端验证/动态页面元素/浏览器端技术/ajax
3/javascript语言:标准语言规范,第三方框架,Jquery/ajax
4/基础js中:基础语法/dom/bom/对象数据封装
5/如何书写Javascript代码---嵌入到html页面,由某个事件引发
某个事件里去调用某个方法:onclick alert()
某个位置封装,事件里调用
<head>里的<script>元素中:不能被其他页面共享,代码多难以维护
代码位于单独的js文件,由页面引入:<script src="">
6/常见的语法规则:
注释
标识符的构成:字母/数字/下划线/$构成,不能以数字开头
大小写敏感
7/变量与数据类型
基本类型:string/number/boolean/null/undefine
复杂类型:Array/Math/Object...
弱类型的语言:声明的时候不需要指定类型,实际类型以赋值为准
声明变量:var i = "aaa";
var j = 100;//100.12
var k = true;
变量之间使用==比较时:value
严格相等:=== value/type
先判断变量的类型:typeof
8/数据类型的转换
直接转换:
数值与字符串:字符串
数值和bool:数值
bool和字符串:bool变为true/false的字符串
转换方法:
parseInt/parseFloat:值确实为数值
toString
如何判断是否为数值:NaN: not a number
isNaN:is not a number
控制语句:
条件:if/else switch/case
循环:for/while
for(var i=0;i<6;i++)
得到界面文本的值:
input 需要id
document.getElementById("").value
9/常用对象
String对象
长度属性:length
方法
substring(start,end):不包含end位置的字符/end是真实的结束位置加1
split("|"):拆分 a,b,c,d
toLowerCase/toUpperCase
charAt
indexOf/lastIndexOf
replace(findStr,replaceStr)
功能简单,实现对于指定字符串的一次替换
功能复杂:结合正则表达式
search(findStr)---index > -1
match(/\d+/)
Array对象
创建: var r = new Array();
赋值: [index]
简写办法:var r = new Array(11,12);
var r = [11,2];
创建二维数组:数组的数组
var r = new Array();
r[0] = [1,2,3];
r[1] = [4,5,6];
属性: length
方法:
输出数组内容
toString():数组内容以逗号连接的字符串形式
join(""):数组内容以指定字符连接的字符串形式
合并数组
arr1.concat(arr2),返回大数组
截取子数组
arr1.slice(start,end):index,且end不被包含
数组的排序
sort(Func对象):默认按照字符串的大小比较
数组的倒转
reverse()
Math对象
属性:
方法:
round/random/floor/ceil--32.21
pow(x,y)
sin/tan
Function对象
函数:使用function关键字定义方法
参数 function MethodName(p1,p2)
返回值 return value;
方法的重载问题
js中没有方法的重载,方法名相同,覆盖,以最后定义的为准
arguments
方法中使用它,它代表实际参数的数组
匿名函数
=function() {};
正则表达式对象 [a-z]{3}
结合string对象的三个方法使用:操作字符串
正则表达式对象:验证
var reg = /\d{3}/;----正则表达式对象
reg.test(string)----bool
Date对象:
创建:var d = new Date();
getXXX:getMonth
setXXX
toXXX: toString/toLocaleTimeString
10/DOM--document object modal---动态的安排页面元素
将整个文档作为一个节点树
找到目标元素节点:
单个节点:getElementById
某类节点:getElementsByTagName---标记名称
其他方法:obj.parentNode/nextSibling
操作某个节点:将html标记对象化
修改文本
使用属性写文本:.value,比如
<input type="text" value="">
标记之间写文本: .innerHTML
比如 span/div/label/li/h1/p
修改样式:集合属性子属性作为style属性的属性存在
o.style.color---修改单个样式
o.className = "";---修改所有样式
添加新元素节点
createElement
appendChild(new):追加,作为最后一个
insertBefore(new,refNode)
替换旧的子节点
目标节点的父节点.replaceChild(new,old)
删除
目标节点的父节点.removeChild(target);
联动菜单/选择
获取下拉框的数据
obj.selectedIndex
obj.options
obj.options[2]
操作表格:显示批量数据
封装后的方法:
table.insertRow(index)/deleteRow(index)
row.insertCell(index)/deleteCell(index)
11 BOM--browser
将整个窗口的内容作了封装
window
document: document.getxx===window.document.getXX
location:地址栏
navigator:浏览器软件的信息
history:历史访问记录
screen:屏幕信息
window对象的方法
open(url,name,config);---返回新打开的窗口对象
config:toolbar menu status
close()
focus()
定时器
周期性:每隔一定时间就触发执行某段代码
setInterval(func对象,ms)---返回启动的定时器对象
clearInterval(定时器对象)
一次性:间隔指定时间出发代码,只触发一次,倒计时的效果
setTimeout(func对象,ms)--返回
clearTimeout()
对话框
alert()
confirm(提示信息)--返回bool类型的操作结果
prompt()---能够录入数据的对话框,返回数据或者null
常用属性
window.status = "sfdf";
opener
location对象:地址栏---替换旧页面
属性 location.href--得到或者设置url
方法
location.replace(url)
location.reload()
history对象:----历史记录
属性 length alert(history.length);
方法
history.back();
history.forward();
screen对象:----屏幕信息
width/height
document对象:----文档
DOM操作的方法
document.write():重写当前文档,可以书写html标记
navigator对象-----浏览器
appVersion
12 事件
事件的类别
鼠标事件
onclick
ondblclick--double
onmouseover
onmouseout
键盘事件
onkeyup
onkeydown
状态事件
onblur
onchange 选择的值发生改变
onload 常用于body
onsubmit 用于form
事件的特征
任何事件里return false,取消事件
冒泡机制:如果对于嵌套的元素定义了相同的事件,底层向上层层触发
event.cancelBubble = true/false
event对象的使用
event:发生事件,封装相关的数据
Firefox里,需要在界面的代码中传入event: οnclick="M(event);"
IE等其他浏览器中:方法中使用event,也可以传入
位置:
event.clientX/clientY
引发事件的元素
event.srcElement----
event.target----firefox
为了实现兼容性: event.srcElement || event.target
判断元素的类别
nodeName--节点的名称(html标记的名称)
为元素添加事件
静态添加:<input onxxx = ""
动态添加:
obj.onclick = func对象;
obj.onclick = function() {};
13 数据的封装--部分面向对象的语法
方式一:使用Object对象
var p = new Object();
p.属性名称 = value;
p.方法名称 = func对象或者匿名函数;
方式二:自定义对象
var p = new Student("mary",18,true);
方式三:Json语法
var p = {"name":"mary","age":18};
扫一扫
3056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
