JavaScript学习总结
JavaScript学习总结
一、JS的内容也很多,由于学习方向不是前端,故而只学习一些较为基础和常用知识点,在后续web方面用的上的知识点.
JS分为三大块:ECMAScript:ECMAScript是一套标准,定义js的语法,是JS的核心,定义语言的基础语法,
DOM(Document object model) :文档对象模型,将标记型文档以及文档中的标签等所有内容都封装成了对象。
在对象中定义了更多的属性和行为.
BOM( Browser object Model): 浏览器对象模型,将浏览器以及浏览器中的一些内容封装成了对象。
JS的基础语法知识:
1.标识符,变量,基础语法:弱类型概念,var/let声明变量,兼容所有数据类型,
2.函数定义:可以声明方法和类,声明的分为自定义函数和匿名函数
语法:function obj( 参数){ 变量和方法 } 属性调用方法:obj.属性 /obj["属性"]
匿名函数:window.onload=function(){ } 这个方法代表页面加载完成后执行该函数,通常作为js代码运
行的最外层函数.
在调用自定义的函数是,有两种方法:直接调用:函数名();
将函数绑定到事件中:button.onclick=函数;此处不需要()
3.数据类型:js的数据类型分为基本数据类型和引用数据类型:
基本数据类型包括undefined、null、number、boolean、string,NAN；
引用数据类型也就是对象类型Object，比如：Object、array、function、data等；
4.流程控制语句:基本的控制语句与Java大都相同,多了with(对象){alert(属性)},以及for(var v in obj){ alert(属性) }
5.事件及注册事件:JS中的事件分为:键盘事件,点击事件,鼠标事件,窗口事件皆由on开头的事件,如onload,onclick,onblur.
第一种方式:<input type="button" value="事件按钮" onclick="window.alert("触发点击事件");">
第二种方式:完全使用js代码完成:
<input type="text" id="mytext" /> <input type="button" id="update" value="修改"/> <script type="text/javascript"> window.onload=function(){ alert("页面加载完成之后执行这个函数"); // 将需要在页面执行后获取的对象放在这里执行 document.getElementById("update").onclick=function(){ alert("此处应该修改文本框的样式"); // 获取文本框对象 var xtext=document.getElementById("mytext"); xtext.type="checkbox";//修改样式 // onclick为点击事件,onkeydown为键盘点击事件 } } </script>
6.prototype(给对象添加属性或方法)重点:使用方法:比如给String对象添加一个去空格的方法:
<script> String.prototype.trim=function(){ return this.replace(/^\s+/,"").replace(/\s+$/,"") // replace(/^\s+/ | /\s+$/ g,"");g代表全文搜索,全文替换 } var str=" 启动 "; alert(">"+str.trim()+"<"); </script>
7.正则表达式:不求会写,只求能看懂,会用
创建正则表达式:var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;验证邮箱的正则表达式,需要放在/..../中
调用test方法验证邮箱是否正确:emailRegExp.test(用户输入的邮箱);返回boolean值
8.DOM编程:通过document根元素对象,获取网页的其他标签对象(通过class,id,name标识获取)
var element=document.getElementById("组件ID值");//byid视情况使用,byname或byclassname
byid会返回单一对象,byname或byclassname会放回一个对象集合,
通过这些对象的方法对页面添加组件动态的事件.
9.BOM编程:基于浏览器的各种操作,如前进,后退,打开新网页,当前网页打开,控制地址栏,等操作
10.JSON(JavaScript object Notation)数据交换格式
<script type="text/javascript">
/**
* 1.什么是JSON,有什么用?
JavaScript object Notation (JavaScript对象标记)，简称JSON。(数据交换格式)
JSON主要的作用是:一种标准的数据交换格式。(目 前非常流行，90%以 上的系统，系统A与系统B交换数据的话，都是采用JSON。)
2.JSON是一种标准的轻量级的数据交换格式。特点是:
体积小，易解析。
3.在实际的开发中有两种数据交换格式，使用最多，其一是JSON, 另一个是XML。
XML体积较大，解析麻烦，但是有其优点是:语法严谨。(通 常银行相关的系统之间进行数据交换的话会使用XML。)
4.JSON的语法格式
var jsonobj={
"属性名":"值",
"属性名":"值",
}
5.调用:jsonobj.属性名
*/
// 1.创建json对象(JSON也称为无类型对象,轻量级,体积小,易解析)
var stuobj={
"sno":"110",
"sname":"张三",
"sex":"男"
}
// 2.调用
alert("学号:"+stuobj.sno+"姓名:"+stuobj.sname);
alert(stuobj["sex"]);//js对象属性的引用方式
// 创建JSON对象数组
var stus=[
{"sname":"张三"},
{"sname":"王五"},
{"sname":"李四"}
];
// 取出数组值
for (var i = 0; i < stus.length; i++) {
var stu=stus[i];
alert(stu.sname);
}
</script>
<script type="text/javascript">
// 复杂一些的json对象
//json的属性可以是任意值,也可以是json对象
var user={
"ID":"123",
"name":"李四",
"address":{
"city":"江西",
"street":"赣州",
},
"hobby":["basketball","drink","tt"],
//谨记:数组要用[]号
};
// 访问用户及居住地
alert(user.name+"居住在:"+user.address.city);
//设计一个json数据,描述全班数据,以及多少人
var grade={
"count":3,
"student":[
{"sname":"张三"},
{"sname":"王五"},
{"sname":"李四"}
],
};
</script>
<script type="text/javascript">
/**
* eval函数的作用:
* 将字符串当做一段JS代码解释并执行
* 作用:java连接数据库，查询数据之后，将数据在java程序中拼接成JSON格式的“字符串”,
* 将json格式的字符串响应到浏览器
* 也就是说,java响应到浏览器的知识一个"JSON格式的字符串",还不是一个JSON对象
*
* 可以使用eval函数,将JSON格式的字符串转换成json对象
*/
window.eval("var i= 100;");
alert("i="+i);
// 使用 \" 将 "号转义
var fromjava="{\"name\":\"张三\",\"password\":\"123\"}";//java发来的json格式字符串
//使用eval方法将json格式字符串转换成json对象
window.eval("var jsonobj="+fromjava);
alert(jsonobj.name+","+jsonobj.password);//在前端获取解析后端传递来的数据
/**
* 在js中:[]和{}的区别?
* []是数组
* {}是json
* java中的数组:int[] arr={};
* js中的数组: var arr=[1,2,3,4];
* json:var jsonobj={"属性":"属性值"};
*
*/
</script>
