最近粗略地学习了JS，作一些简要的笔记，方便以后回顾
组成
JS包括三大块:
ECMAScript : JS的核心语法
DOM：文件对象模型(HTML文档被当做一棵DOM树来看待)
BOM：浏览器对象模型(关闭、打开浏览器窗口、后退、前进、浏览器地址栏上的地址等都是BOM编程)
BOM和DOM的区别和联系:
BOM的顶级对象是window
DOM的顶级对象是document
实际上BOM是包含DOM的
HTML中嵌入JS代码的方式
1.内嵌
<input type="button" value="hello" onclick="window.alert('Hello JS!')">
2.脚本块
<script type="text/javascript">
alert("Hello JS!")
</script>
3.引入外部独立的JS文件
<script type="text/javascript" src="js/1.js"></script>
全局变量和局部变量
一个变量声明的时候没有用var关键字，无论它是在哪里声明的，它都是全局变量
function fun(){
myname="hhh"
}
//其中myname是全局变量
函数
语法格式:
第一种：
function 函数名(形参列表){
函数体;
}
第二种:
函数名 = function(形参列表){
函数体;
}
eg:
<script type="text/javascript">
function hello(){
alert("Hello JS")
}
</script>
<input type="button" value="hello" onclick="hello()">
数据类型与类
1.原始类型:Undefined,Number,String,Boolean,Null
String声明方式:
(1)var x=”abc”;
(2)var x=new String(“abc”)
相应函数:
(1)Number类型：
isNaN(数据) 判断数据是不是数字
parseInt(数据) 将字符串转换成数字，并且取整数位
parseFloat(数据) 将字符串转换成浮点型数据
Math.ceil(数据) 向上取整
(2)Boolean类型：
Boolean(数据) 将非布尔类型转换为布尔类型
(3)String类型：
indexof() 获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf() 获取指定字符串在当前字符串中最后一次出现的索引
replace() 替换
substr(start，length) 截取子字符串
substring(start，end) 截取子字符串
toLowerCase() 转换小写
toUpperCase() 转换大写
split() 拆分字符串
2.引用类型：Object以及它的子类
属性：
prototype (常用的)，作用是给类动态的扩展属性和函数
constructor
函数：
toString()
valueOf()
toLocaleString()
另外，ES6后基于上述6种类型之外添加了一种新的类型Symbol
3.类
JS中定义类的语法(和创建函数的语法一样):
1.
function 类名(形参){
}
2.
类名=function(形参){
}
eg:
User = function(username,password){
this.username=username;
this.password=password;
this.getpwd = function(){
return this.password;
}
}
var p=new User("张三","123")；
var pwd=p.getpwd();
User.prototype.getUname() = function() {
return this.usrname;
}
创建对象的语法：
new 构造方法名(实参); //构造方法名和类名一致
4.typeof运算符
JS中有一个运算符typeof，这个运算符可以在程序的运行阶段动态获取变量的数据类型
语法: typeof 变量名
typeof运算符的运输结果是以下6个字符串之一(全是小写)：
“undefined”
“number”
“string”
“boolean”
“object“
“function”
eg:
function sum(a,b){
if(typeof a=="number"&&typeof b=="number"){
return a+b;
}
alert(a+","+b+"必须都为数字！")；
}
var b=null;
//typeof b的结果是"object"
5.JS中还有两个比较特殊的运算符
==：等同运算符，只判断值是否相等（null==undefined的结果是true）
===：全等运算符，既判断值是否相等，也判断数据类型是否相等
事件
1.常用事件:
blur 失去焦点
focus 获得焦点
click 鼠标单击
dblclick 鼠标双击
keydown 键盘按下
keyup 键盘弹起
mousedown 鼠标按下
mouseup 鼠标弹起
mouseover 鼠标经过
mousemove 鼠标移动
mouseout 鼠标离开
reset 表单重置
submit 表单提交
change 下拉列表选中项改变或文本框内容改变
select 文本被选定
load 页面加载完毕
任何一个事件都对应着一个事件句柄，事件句柄是在事件前添加on，onxxx这个事件句柄出现在一个标签的属性位置上
回调函数:自己把函数的代码写出来了，但是这个函数不是自己负责调用，由其他程序员负责调用该函数
2.注册事件的两种方式
(1)直接在标签中使用事件句柄
<script type="text/javascript">
function sayHello(){
alter("hello js!")
}
}
</script>
<input type="button" value="hello" onclick="sayHello()" />
(2)使用纯JS代码完成事件的注册
1)获取这个按钮对象
var btnObj = document.getElementById("mybtn");
2)给按钮对象的onclick属性赋值
第一种形式:
btnObj.onclick = doSome;
第二种形式:
btnObj.onclick = function(){
alter("666")
}
第三种形式:
document.getElementById("mybtn").onclick = function(){
alter("666")
}
eg：
<input type="button" value="hello" id="myhello" />
<script type="text/javascript">
function doSome(){
alter("hello js!")
}
var btnObj = document.getElementById("mybtn");
btnObj.onclick = doSome;//注意:这里的doSome后面不用加括号，即不要写成doSome()
</script>
3.JS代码的执行顺序
如下代码不能执行:
<body>
<script type="text/javascript">
function doSome(){
alter("hello js!")
}
var btnObj = document.getElementById("mybtn");
btnObj.onclick = doSome;
</script>
<input type="button" value="hello" id="myhello" />
</body>
改成这样后就可以
<body>
<script type="text/javascript">
window.onload = function(){//页面加载完毕后才运行此回调函数
document.getElementById("myhello").onclick = function(){
alter("hello js!")
}
}
</script>
<input type="button" value="hello" id="myhello" />
</body>
4.捕捉回车键
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById("mytext").onkeydown = function(event){
if(event.keyCode == 13){//回车键的键值是13，ESC的键值是27
alert("正在加载……")
}
}
}
</script>
<input type="text" value="hello" id="mytext" />
</body>
5.void运算符
语法 : void(表达式)
运算原理: 执行表达式，但不返回任何结果
javascript:void(0)
//其中"javascript:"的作用是告诉浏览器这是一段JS代码，不可省略
eg:
<a href = "javascript:void(0)" onclick="window.alert('test')">
既保留了超链接的样式，同时用户点击该超链接的时候执行了一段JS代码，但页面不跳转
</a>
正则表达式
创建正则表达式对象:
第一种方式: var regExp = /正则表达式/[“flags”]
第二种方式: var regExp = new RegExp(“正则表达式”,”flags”)
关于flags:
g: 全局匹配
i: 忽略大小写
m: 多行搜索(ES规范制定后才支持m)，当前面是正则表达式的时候不能用m，只有前面是普通字符串时才可以使用。
正则表达式有一个test(str)方法，返回true/false值，判断str是否和正则表达式匹配
用法: regExp.test(str)
BOM编程
1.打开和关闭
window.open(“url”) 打开页面
window.close() 关闭页面
<input type="button" value="打开百度" onclick="window.open('https://www.baidu.com')"/>
<input type="button" value="关闭页面" onclick="window.close()"/>
2.后退
window.history.back() 后退
window.history.go(-1) 后退
3.设置浏览器地址栏上的URL
window.location / document.location
<input type="button" value="打开百度" onclick="window.location = 'http://www.baidu.com'"/>
4.将当前窗口设置为顶级窗口
if(window.top != window.self){
window.top.location = window.self.location
}
JSON
JavaScript Object Notation 简称JSON，是一种标准的轻量级的数据交换格式，体积小，易解析。在实际开发中，有两种数据交换交换格式，一种是JSON，一种是XML，XML体积大，解析麻烦，但语法严谨（通常银行相关的系统之间进行数据交换时会用XML）。
1.JSON语法:
var jsonObj = {
"属性名":属性值,
"属性名":属性值,
"属性名":属性值,
……
};
复杂版(套娃版):
var jsonObj = {
"属性名":属性值,
"属性名":属性值,
"属性名":{
"属性名":属性值,
"属性名":属性值,
……
}
……
};
2.创建 JSON对象
var studentObj = {
"sno" : "110",
"sname" : "张三",
"sex" : "男"
};
3.访问JSON对象的属性
alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex)
4.JSON数组
var students = [
{"sno":"110","sname":"张三","sex":"男"}
{"sno":"120","sname":"李四","sex":"男"}
{"sno":"130","sname":"王五","sex":"男"}
]
问: 在JS中：[ ] 和 { } 有什么区别 ？
答: [ ]是数组，{ }是JSON
5.遍历
for(var i = 0; i < students.length; i++){
alert(students[i].sno + "," + students[i].sname + "," + students[i].sex)
}
6.eval函数
作用: 将字符串当做一段JS代码执行
window.eval("var i = 100")
3262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
