JavaScript学习笔记

补一下上学期没学的js，也算给jQuery做一下知识储备

JavaScript概述

ECMAScript、DOM、BOM

• JavaScript包括ECMAScript、DOM、BOM
  • ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法
  • DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的（Document Object Model：文档对象模型）
  • BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范（Browser Object Model：浏览器对象模型）

ECMAScript（JS核心语法）

嵌入JS三种方式

• 行间事件
• 脚本块
• 引入外部独立的js文件

标识符和关键字

• 关键字：var、for
• 标识符：i、alert

函数

• 在JS当中函数声明的优先级比较高,打开网页的时候,网页中所有的函数先进行声明

• 变量只声明没有赋值,系统默认赋值undefined, 在JS当中undefined是一个具体存在的值

• 遵守就近原则

• 如果一个变量声明的时候没有使用var关键字的话，就是全局变量。这种全局变量在声明的时候必须手动赋值，不能采用系统默认值

• 不存在重载机制（会覆盖）

  function 函数名(形式参数列表){
  	函数体;
  }
  例如：
  function sum(a, b){
  	return a + b;
  }

• 在事件句柄当中调用sayHello函数

  <input type="button" value="hello" onclick="sayHello('李四')" />

调试

• alert()
• F12中控制台、查看器、网络

数据类型

• ES6之前JS的数据类型包括6种：

  • Undefined

    • 当一个变量声明之后没有手动赋值，系统默认赋值undefined

  • Number

    • -1 0 1 3.14 2.0 …
    • NaN（表示不是一个数字）
    • 当一个数学表达式的运算结果本应该返回一个数字， 但是最终无法返回一个数字的时候，结果是NaN
    • Infinity（无穷大，当除数是0的时候，最终计算结果是无穷大）
    • isNaN()函数
      • 最终返回布尔类型，返回true表示不是一个数字，返回false表示是一个 数字
    • Number()函数
      • 将数据转换成数字类型的数据
    • parseInt()函数
      • 将字符串数字转换成数字，并且向下取整
    • parseFloat()函数
      • 将字符串转换为数字
    • Math.ceil()函数
      • Math工具类中的一个函数，向上取整

  • Null

    • typeof null 运算结果是object

  • Boolean

  • String

    • 常用的属性和方法

      • length属性 获取字符串长度

      • charAt 方法 获取指定下标位置的字符

      • concat 方法 连接字符串

      • indexOf 方法 第一次出现处的索引

      • lastIndexOf 方法 最后一次出现处的索引

      • replace 方法 替换

      • split 方法 拆分字符串

      • substr 方法 截取字符串

      • substring 方法 截取字符串（不包含end）

      • toLowerCase 方法 转小写

      • toUpperCase 方法 转大写

      • trim 方法 去除字符串前后空白

  • Object

    • 常用的属性和方法
      • prototype属性
      • constructor属性
      • toLocaleString方法
      • toString方法
      • valueOf方法

  • 其中：Undefined、Number、String、Boolean、Null都属于原始类型（基本数据类型）

    • == 等同运算符：只比较值是否相等
    • ===全等运算符：既比较值是否相等，同时又比较数据类型是否相同

  • 其中：Object属于引用数据类型（对象类型）

• 在ES6之后引入了其它新的类型，知道就行：

  • Symbol
  • BigInt

typeof运算符

• 动态的获取变量的数据类型
• typeof 变量名
• 运算结果是以下6个字符串之一（小写）
  • undefined
  • number
  • string
  • boolean
  • object（null的运算结果）
  • function

JS中的事件

• blur 失去焦点
• focus 获得焦点
• click 鼠标单击
• dblclick 鼠标双击
• keydown 键盘按下
• keyup 键盘弹起
• mousedown 鼠标按下
• mouseover 鼠标经过
• mousemove 鼠标移动
• mouseout 鼠标离开
• mouseup 鼠标弹起
• submit 表单提交
• reset 表单重置
• select 文本被选定
• change 下拉列表选中项改变，或文本框内容改变
• load 页面加载完毕

任何一个事件都有对应的事件句柄，事件句柄即在事件名称前添加on

JS注册事件

• 事件句柄

  • 回调函数
    • 当事件发生之后，监听器会负责调用该函数

• 通过id获取节点再注册事件

  • ```js
    var btnobj = document.getElementById(“mybtn”)
    btnobj.onclick = hi //不要加括号！！

    
    - ```js
      document.getElementById("mybtn").onclick = function(){
      	alert("Hello,js")
      }

JS执行顺序

写一个大的onload嵌套可以实现网页加载完毕后再执行

window.onload = function(){
}

捕捉回车键

• 回车键键值13

• ECS键键值27

  window.onload=function(){
      var mytext = document.getElementById("mytext")
      mytext.onkeydown=function(key){
          if(key.keyCode === 13){
              alert("正在登录,请稍后...")
          }
      }
  }

void运算符

• 语法格式

  • void(表达式)

• 保留住超链接的样式，同时不发生跳转（跟括号里的数字无关）

  href="javascript:void(0)"

JS的控制语句

除了和java相同的以外还有for..in语句和with语句

• for...in

  • 数组

    for(var tmp in arr){
    	//arr是数组的话,tmp就是数组的下标
    }

  • 对象

    for(var tmp in f){ // e是JS对象的话,fdsafdsa就是对象的属性名.并且属性名是字符串.
    	console.log(f[temp])
    }

• with（没什么用）

  var x = new Employee(123, "ABC");
  with(x) {
  	console.log(empno + "," + ename)
  }

DOM（文档对象模型）

操作div和span：innerHTML和innerText属性

• innerHTML添加HTML代码
• innerText添加普通文本

a.innerHTML = "<h1>div被设置了</h1>"
a.innerText = "div被设置了"

正则表达式

常见符号

. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束

* 重复零次或更多次 0-N次
+ 重复一次或更多次  1-N次
? 重复零次或一次  0或1次
{n} 重复n次  n次
{n,} 重复n次或更多次  n+次
{n,m} 重复n到m次  n到m次
注意：数量永远匹配的都是前面的那个字符出现的次数。

\W 匹配任意不是字母，数字，下划线，汉字的字符 
\S 匹配任意不是空白符的字符 
\D 匹配任意非数字的字符 
\B 匹配不是单词开头或结束的位置 
[^x] 匹配除了x以外的任意字符 
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符 

| 表示或者

[a-z]{1} a到z所有的字符中的任意1个。

[a-zA-Z0-9]{3,} 前面这堆中的任意字符至少出现3个。

[1-9][0-9]{4,}    qq号的正则表达式，最小的qq号是10000

[1-9] 没有指定数量的时候，默认是1个。

创建正则表达式对象

• var regExp = /正则表达式/标记

• 使用内置类RegExp类。

• var regExp = new RegExp(“正则表达式”, “标记”

g：全局 global
i: 忽略大小写ignorecase
gi: 全局扫描，并且忽略大小写

对象方法

var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
var ok = emailRegExp.test("用户输入的字符串");	//ok为true则表示匹配成功

拓展tirm方法

this.replace(/^\s+/,"").replace(/\s+$/,"")

获取元素的三种方式

// 根据id获取一个元素
var div1 = document.getElementById("div1")

//根据name属性获取多个元素
var aihaos = document.getElementsByName("aihao")

//根据标签的名字获取
var divs = document.getElementsByTagName("div")

复选框的全选和取消全选

checked可以查看复选框的状态，值为true和false

var firstcheck = document.getElementById("firstcheck")
var aihaocheck = document.getElementsByName("aihao")
firstcheck.onclick=function(){
    for(var i=0;i<aihaocheck.length;i++){
    	aihaocheck[i].checked=firstcheck.checked
	}
}
for(var i=0;i<aihaocheck.length;i++){
    aihaocheck[0].onclick=function(){
        var count = 0
        for(var i=0;i<aihaocheck.length;i++){
            if(aihaocheck[i].checked){
            	count++
            }
        }
        firstcheck.checked=(count==aihaocheck.length)
    }
}

下拉列表的value

change下拉列表选中项改变，或文本框内容改变

var provice = document.getElementById("province")
provice.onchange=function(){
	alert(provice.value)
}

网页时钟

内置对象Date

var nowtime = new Date()
nowtime2 = nowtime.toLocaleString()	//本地语言环境的时间
document.write(nowtime2)
document.write("<br>")
document.write(nowtime.getYear())	//年（不完整）
document.write("<br>")
document.write(nowtime.getFullYear())	//年（全格式）
document.write("<br>")
document.write(nowtime.getMonth())	//月-1 (0-11)
document.write("<br>")
document.write(nowtime.getDay())	//一周的第几天(0-6)
document.write("<br>")
document.write(nowtime.getDate())	//日
document.write("<br>")
document.write(nowtime.getTime())	//毫秒 1970.1.1 00:00:00

周期函数

setInterval和clearInterval

function start(){
	v = window.setInterval("displayTime()",1000)
}

function stop(){
	window.clearInterval(v)
}

Array数组

很随意

push向数组中添加一个元素,并且加到末尾

pop将数组末尾的元素弹出,并且数组长度-1

reverse翻转数组

join连接成字符串

拼接html、设置table的tbody

var studentArray = json.students
var html = ""
for(var i = 0; i < studentArray.length; i++){
    var s = studentArray[i]
    html += "<tr>"
    html += "<td>"+(i+1)+"</td>"
    html += "<td>"+s.name+"</td>"
    html += "<td>"+s.age+"</td>"
    html += "</tr>"
}
// 将以上拼接的HTML设置到tbody当中
document.getElementById("stutbody").innerHTML = html

BOM（浏览器对象模型）

window的open和close

• _self当前窗口
• _blank新窗口
• _parent父窗口
• _top顶级窗口

<!-- 开启一个窗口，默认是开启一个新窗口。 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"/>
		
<!-- 开启一个窗口，在当前窗口中显示 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_self')"/>
<!-- 开启一个窗口，在新窗口中显示 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_blank')"/>
<!-- 开启一个窗口，在父窗口中显示 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_parent')"/>
<!-- 开启一个窗口，在顶级窗口中显示 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_top')"/>

<input type="button" value="关闭窗口" onclick="window.close()"/>

alert和confirm

if(window.confirm("亲，确认删除数据吗？")){
	alert("数据正在删除中，请稍后...")
}

历史记录

window.history.back()
window.history.go(1)
window.history.go(-1)

location

document.location="https://baidu.com/"
window.location="https://baidu.com/"
window.open("https://baidu.com/")

顶级窗口

<script type="text/javascript">
    function setTop(){
        if(window.top!=window.self){
        	window.top.location=window.self.location
        }
    }
</script>
<input type="button" onclick="setTop()" value="设为顶级窗口"/>

JSON

什么是json？

一种轻量级的数据交换格式

• XML体积大，解析难度大，语法严格
• JSON体积小，解析更容易，语法相对松散

在JavaScript当中，json是以对象的形式存在的

语法格式

JSON是一种无类型的对象，直接一个大括号包起来就是一个JSON对象

var jsonObj = {
	"属性名" : 属性值,
	"属性名" : 属性值,
	"属性名" : 属性值,
	"属性名" : 属性值,
	"属性名" : 属性值,
	"属性名" : 属性值,
	....
}

注意：

JS中 [] 是数组对象 {} 是json对象

案例

var studentObj = {
    "sno":"01",
    "sname":"小明",
    "addr":{
        "city":"杭州市",
        "street":"临安区"
    },
    "sex":"男"
}
alert(studentObj.sno+","+studentObj.sname+","+studentObj.addr.city+","+studentObj.addr.street+","+studentObj.sex)
var students = [
    {"sno":"01","sname":"张三","sex":"男"},
    {"sno":"02","sname":"李四","sex":"女"},
    {"sno":"03","sname":"王五","sex":"男"}
]
for(var i=0;i<students.length;i++){
    var stuObj = students[i]
    alert(stuObj.sno+","+stuObj.sname+","+stuObj.sex)
}	

eval函数

将一个字符串当做一段JS代码解释执行

var fromJava = "{\'name\':\'张三',\'score\':\'80\'}"
window.eval("var javaObj = " + fromJava)
alert(javaObj.name+","+javaObj.score)