1、什么是JS
JS就是JavaScript，是一种运行在浏览器的脚本语言。（脚本语言：能以普通文本形式保存）
JS注释：跟java一样
2、
(1)嵌入JS的第一种方法：
例：点击弹出消息框：
<input type=”button” value=”hello” onclick=”alert(‘hello!’);”/>
①JS可以用单引号也可以用双引号
②结束之后可以用分号也可以不用
(2)第二种方法(样式块)：
在任意位置中，如：
<script type=”text/javascript”>
alert(“hello!”);
</script>
alert有阻塞页面加载作用
(3)第三种方法：引入外部JS文件
<script type=”text/javascript” src=”js/01.js”></script>
注意：JS可以引入多次，但没有必要
<script></script>是成对出现
3、JS变量（弱类型）：
（1）定义：var i = 10；
i的类型取决于右边的值的类型，如果没有给i具体赋值，那么i的值为undefined，这是一个具体的值
4、函数：
(1)定义
第一种：
function 函数名（形参列表）{
函数体；
}
第二种：
函数名=function（形参列表）{
函数体；
}
如：
function sum (a,b){
alert(a+b);
}
addit = function(a,b){
alert(a+b);
}
调用：sum(3,4);
无需指定返回值类型，任意类型都可以
(2)两个函数同名时，后来出现的那个会覆盖掉前面那个
(3)函数调用时，参数个数不限制，类型不限制
5、全局变量，局部变量：
全局变量:
在函数体之外声明的变量属于全局变量，
全局变量的生命周期是:浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。
能使用局部变量尽量使用局部变量。
局部变量:
在函数体当中声明的变量，包括一个函数的形参 都属于局部变量，
局部变量的生命周期是:函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
局部变量生命周期较短。
注意：当局部变量没有用var声明时，它就是一个全局变量了
6、数据类型：
(1)原始类型:Undefined、Number、String、Boolean、Null
(2)引用类型：Object以及Object的子类
(3)typeof运算符，用来判断类型：
如：
if(typeof a=="number"){
alert("number!");
}
结果有6个：”undefined”,”number”,”string”,”boolean”,”object”,”function”
其中，当原始数据类型为Null时，typeof的结果为Object
7、Number数据类型：
(1)正负数，NaN（不是数字）,Infinity（无穷大）
(2)isNaN(值)函数,返回值true：不是一个数字，false：是一个数字
(3)parseInt（字符串）函数：转换为整数，如：”3.99”---->3
(4)parsefloat（字符串）函数：转换为float，如：”3.1”---->3.1
(5)Math.ceil(字符串)：向上取整，如：”2.1”---->3
8、Boolean数据类型：
Boolean（）函数：转换为boolean类型
规律：“有”就是true，“没有”就是false
如：“有”：Boolean(1),Boolean(“abc”),Boolean(Infinity)
9、String数据类型：
(1)
var x = "abc"
var y = new String("abc");
(2) 字符串.indexof（目标字符串）：查找目标字符串第一次出现的下标
字符串.replace（原内容,后来的内容）：只替换第一个
字符串.substr(开始下标，长度)
字符串.substring（开始下标，结束下标）：左闭右开
10、Object
(1)JS中的类的定义,同时又是一个构造函数的定义
(2)在JS中类的定义和构造函数的定义是放在一起来完成的。
(3)
User = function(no){
this.no = no;
}
创建对象：var n1 = new User(“111”);
(4)可以通过prototype这个属性来给类动态扩展属性以及函数
User.prototype.getUname = function(){
return this.uname;
}
n1.getUname();
11、null、NaN、undefined区别：
（1）三者数据类型不一致
null----->”object”
NaN----->”number”
undefined------>”undefined”
（2） null和undefined的值可以等同，即null==undefined
（3） 等同运算符（只判断值是否相等）：==
全等运算符（值和数据类型都要相等）：===
null===undefined结果为false
12、JS中的事件:
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseup鼠标弹起
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
reset表单重置
submit表单提交
change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生。)
任何一个事件都会有一个事件句柄，事件句柄就是在事件前加on。onXXX出现在一个标签的属性位置上，比如：<input type=”submit” onclick=”alert(‘hello’)”/>
12、注册事件的方式：
第一步：先通过id获取操作的对象
第二步：给对象赋值
如：
dosome = function(){
alert("do some");
}
var btnobj = document.getElementById("btn");
btnobj.onclick=dosome;
13、代码的执行顺序(页面加载完毕之后才执行js代码)：
<script type=”text/javascript”>
window.onload=function(){
document.getElementById(“btnobj”).onclick=function(){
alert(“do some”);
}
........
}
</script>
14、代码捕捉回车键、ESC键
(1)回车键的键值为13
ESC键的键值为27
(2)对于键盘事件来说，都有一个keycode属性来获取键值
如：
<script type=”text/javascript”>
window.onload=function(){
document.getElementById(“btnobj”).onkeydown=function(event{
if(event.keycode===13){
alert(“登录中.........”);
}
}
........
}
</script>
15、void运算符：
void(表达式)
原理：执行表达式，但是不返回任何结果
使用：javascript:void(0)
如：
<a href=”javascript:void(0)” onclick=”window.alert(‘hello world!’)”>
点击弹出窗口，页面不会跳转
</a>
16、JavaScript包括三大块:
（1）ECMAScript: JS的核心语法(ES规范/ ECMA- 262标准)
（2）DOM: Document object Model (文档对象模型:对网页当中的节点进行增删改的过程。) HTML文档被当做一棵DOM树来看待。
用法：var domObj = document . getElementById("id");
（3）BOM: Browser object Model (浏览器对象模型)
关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的 地址等，都是BOM编程。
17、DOM编程：设置和获取文本框的value
用户输入的内容就是value的内容，获取可以通过设置input文本框的id，获取id属性得到文本框对象，文本框对象.value就可以获得。
如：
var obj = document.getElementById(“text”);
alert(obj.value);
18、innerHTML和innerText区别：
innerHTML会把后面的字符串当做一段代码来执行
innerText只是会把它当做普通的字符串来看待
如：
<input type="button" value="设置内容" id="btn">
<input type="text" id="textbox">
<script type="text/javascript">
window.onload=function(){
var btn = document.getElementById("btn");
var textBox = document.getElementById("textbox");
btn.onclick = function(){
textBox.innerText = "<font color='red'>用户名张三 </font>";
textBox.innerHTML = "<font color='red'>密码xxxx </font>";
}
}
</script>
19、正则表达式：用在字符串格式匹配方面
(1)常见的正则表达式符号?
.匹配除换行符以外的任意字符
\w匹配字母或数字或下划线或汉字
\s匹配任意的空白符
\d匹配数字
\b匹配单词的开始或结束
^匹配字符串的开始
$匹配字符串的结束
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次
\W匹配任意不是字母，数字，下划线，汉字的字符
\S匹配任意不是空白符的字符
\D匹配任意非数字的字符
\B匹配不是单词开头或结束的位置
[^x]匹配除了x以外的任意字符
[^aeiou]匹配除了aeiou这几个字母以外的任意字符
(2)email的正则表达式：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
(3)创建正则表达式对象：
第一种：
var regExp = /正则表达式/flags;
第二种：
var regExp = new RegExp(“正则表达式”,”flags”);
(4)关于flags：
三个取值g,i,m
g:全局匹配
i：忽略大小写
m：多行搜索（ES规范制定后才支持的）当前面内容是正则表达式时，m不可用，当前面为字符串时，m才可以用
(5)正则表达式的test()方法：
true/false = 正则表达式对象.test(用户填写的字符串);
true：表示匹配成功
false：匹配失败
如：
<input type = “text” id = “in”/>
<span id = “sp” style=”color:red;font-size:12px”></span>
var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var str = document.getElementById(“in”).value;
var result = email.test(str);
if(result){
document.getElementById(“sp”).innerText(“合法”);
}else{
document.getElementById(“sp”).innerText(“不合法”);
}
20、去除字符串的前后空白：
trim()方法
如：var username = document.getElementById(“username”).value.trim();
21、获取时间：
（1）获取本地时间：
var nowTime = new Date();
nowTime = nowTime.toLocaleString();
document.write(nowTime);
（2）获取年月日：
var t = new Date();
var year = t.getFullYear();
var month = t.getMonth();
var day = t.getDate();
（3）获取毫秒数：
var times = t.getTime();
（4）定时器：
setInterval(函数，毫秒数)函数，clearInterval(setInterval的返回值)函数：
v = window.setInterval(函数，1000);
window.clearInterval(v);将定时器停止
22、BOM：
(1)window.open()和window.close()
如：
<input type=”button” value=”打开百度” onclick=”window.open(‘http://www.baidu.com’,’_self’)”/>
<input type=”button” value=”关闭” onclick=”window.close();”/>
(2)弹出确认框：
如：
if(window.confirm(“确认删除？”)){
alert(“正在删除..........”);
}
(3)window.back()：后退回上一个页面
(4)设置浏览器地址栏上的URL：document.location = “http://www.baidu.com”;或window.location=”http://www.baidu.com”;
(5)console.log();//输出到控制台
(6)将当前窗口设置为顶级窗口：
if(window.top!=window.self){
window.top.location = window.self.location;
}
23、JSON
（1）什么是JSON，有什么用?
JavaScript object Notation (JavaScript对象标记)，简称ISON。 (数据交换格式)
JSON主要的作用是:一种标准的数据交换格式。(目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。)
JSON是一种标准的轻量级的数据交换格式。特点是:体积小，易解析。
（2）在实际的开发中有两种数据交换格式，使用最多，其一是JSON, 另一个是XML。
XML体积较大，解析麻烦，但是有其优点是:语法严谨。(通常银行相关的系统之间 进行数据交换的话会使用XML。)
（3）创建一个JSON对象：
var jsonObj = {"name":"zs","sex":"男"};
（4）eval函数：
将字符串当做一段JS代码执行
window.eval("var u = 100");
（5）在JS中，[ ]和{ }有什么区别？
[ ]是数组，{ }是JSON
在Java中，数组：int[ ] arr = {1,2,3,4,5};
（
6）访问一个JSON对象的属性：
jsonObj.name或jsonObj["name"]
（7）拼接table中的tbody：
如：
<script type="text/javascript">
var data = {
"total":4,
"emps":[
{"empno":2389,"ename":"Jorn","sal":900.0},
{"empno":2334,"”ename":"Mary","sal":1233.0},
{"empno":4532,"ename":"Mickle","sal":4521.0},
{"empno":6732,"ename":"Jack","sal":5564.0}
]
};
window.onload = function(){
var btn = document.getElementById(“btn”);
btn.onclick = function(){
var emps = data.emps;
var html = "";
for(var i = 0;i < emps.length;i++){
html += "<tr>";
html += "<td>"+emps[i].empno+"</td>";
html += "<td>"+emps[i].ename+"</td>";
html += "<td>"+emps[i].sal+"</td>";
}
document.getElementById("empbody").innerHTML = html;
}
}
</script>
|