前端基础(3)--Javascript了解

Javascript简介

是一种轻量级的脚本语言，动态弱类型，可插入HTML页面的编程代码，支持所有的现代浏览器，所有的JS代码都在<script></script>标签中执行，语句尾加分号。

对于一种新的编程语言，可基本按照数据类型、基本运算、流程控制、函数等此顺序进行了解，js由于多是用于嵌入html文档，因此需要重点了解其与html文档的交互，一些方法如下表所示。

①使用document.write()时仅向HTML文档输出内容，如果在文档加载结束后(如作为点击事件触发)再执行，则会覆盖文档全部内容；

②JS作为脚本语言，其按照编写顺序执行语句，<script>x1;x2</script>，若使用<script>{x1;x2}</script>则其中的语句同时执行；

③JS对大小写敏感，可忽略多余的空格，可在文本字符串中使用’x\y’折行，但不能在语句中折行；

④单行注释// 注释内容，多行注释/* 注释内容 */；

⑤变量声明后值为undefined(空)，变量可以重新声明，重新声明不改变变量已有的值；

⑥JS的数据类型如下
字符串：‘string’；
数字：JS只有一种数字类型，可带小数点，可用科学计数法表示；123e3(123000)；
布尔值：true/false；
数组：有三种创建方式，var cars = new Array(); cars[0]=0; cars[1]=1;/var cars = new Array('x', 'y');/var cars = ['x', 'y']三种方式等价，用cars[0]方式(中括号记法)访问值，直接访问cars时输出为x,y,z；
对象：JS对象，以键值对方式存在，var cars={q:'x', w:'y'}，可通过cars.q和cars['q'](注意创建时没有引号)修改和访问值；
undefined/null：变量无值/变量为空；
声明新变量：可直接声明类型

var x = new String()/Number(0)/Boolean(false)/Array()/Object([object Object])

其中括号内为声明新变量后的默认值，对于JS对象来说，其直接输出只显示[object Object]，注意声明时大小写敏感，对象类型可直接通过赋值改变(不声明变量不影响使用，不包括对象变量，对象变量必须声明)，不同类型的变量可以直接相加以字符串形式显示；

⑦JS是面向对象语言，每个对象都有自己的属性和方法(有一些是通用的，如str.length等，对象变量不支持length)，其数组和对象变量都可以拥有、自定义自己的属性和方法，方法一般使用驼峰记法(其他类型变量不能自定义属性)；

⑧变量可以直接相加，若同为数字类型则按运算符号运算，若有字符串等其他类型则按字符串类型相加，输出时如alert(‘a+b’)与alert(a+b)不同；

⑨js函数使用return立刻返回，注意函数内部声明的变量为局部变量，若不声明直接赋值则默认为全局变量；

⑩for循环中，abc条件均可省略但分号不可省略；if语句中，其后的花括号可以省略，即可以写为if (条件) 代码;；

⑾在JS中不存在outofrange异常，因此可以直接用list[i]作为循环条件，如while(a[i])/for(;a[i];)，意为列表长度。

⑿在js中可以直接对html元素进行获取x = document.getElementById(id)，其属性x.value可以直接赋值，会应用于当前页面上，如可以动态设置文本框默认值；(即可以动态的修改html元素的属性/样式)

js中自定义对象构造器：①function person(x1,x2,x3,x4){this.x1=x1;this.x2=x2;this.x3=x3;this.x4=x4},使用时var q=new person(a,b,c,d),构造一个对象q拥有x1,x2,x3,x4四个属性值分别为a,b,c,d；
②当对象q已存在时，可以q.a=b添加属性；
③可用相同的方法为对象q添加方法，其中方法可以在对象构造器；
④所有的函数都可以视为一个对象构造器，只要使用var q=new xxx(a,b)的方式调用，就会创建一个q对象，其拥有该函数的属性；

js中数字：Number对象不分类型，统一储存为浮点数，整数最多15位，小数最多17位，有一部分属性是针对构造函数Number的而非某个具体的Number对象的，常用方法有：toString(进制，默认10)，toFixed(小数位数)返回一个字符串，toPrecision(显示总位数)；

js中字符串：String对象，属性s.length返回字符串的长度，有相当多的方法，如s.big()/blink()/bold()/fontcolor(‘red’)/fontsize(12)/strike()/ link(‘url’)等改变字符串本身显示方式，s.split(分隔符,次数)返回一个字符串数组，s.concat(a,b)返回一个连接的字符串，s.slice(5,9)返回截取指定下标字符串，s.anchor(‘x’)生成a元素锚点等，另一部分与正则匹配相关；(注意alert(a,b)会只显示a，除非a+b，即js中的函数若只接收一个参数且传入了多个参数，则其只会使用第一个参数)

js中日期：var d=new Date()创建Date对象，返回当前日期时间，Date对象的方法有d.getTime()返回从1970年1月1日至今的毫秒数，d.getDay()显示以数字[0-6]表示的星期，d.getHours/Minutes/Seconds返回Date对象的小时/分钟/秒数等；

js中数组：var a=new Array(3)创建Array对象，可以在创建时指定其最短长度(即会默认添加undefined元素)，a.concat(b,c)连接数组并返回结果，a.join(‘x’)通过指定的分隔符将数组中的元素连成一个字符串并返回，a.pop()删除并返回最后一个元素，a.push(b,c)向数组末尾添加元素并返回新的数组的长度，a.reverse()倒排，a.shift()删除并返回数组的第一个元素，a.slice(3,5)返回一个子数组含前不含后，a.splice(index, count, b,c,d)其中index为插入下标，count为删除元素的数目可为0，后续为要插入的元素；

js中算数：js中有专门的Math对象用于执行算数任务，其并非一个类的实例，因此无需构造可直接使用，如Math.PI，Math.random()生成一个0-1的随机数；

js中的正则表达式：RegExp对象(Regular Expression),是JS中的正则表达式对象，其用于字符串正则匹配，标准模式为/pattern/attributes，可以直接定义变量var re=/xx/g，也可以使用new RegExp(‘xx’, attributes)创建正则对象，其attributes中g意为global，i意为ignore(忽略大小写进行匹配)，m意为执行多行匹配，\在正则中表示转义(如-等)，其具体方法及规则如表；RegExp的方法有①test，patt.test(str)若str中有匹配正则patt的文本则返回true，否则false②exec，用法与test相同，但返回一个结果数组，其中包括了分组与两个属性index属性声明的是匹配文本的第一个字符的位置，input 属性则存放的是被检索的字符串string；

支持正则的字符串方法：
①str.search(patt)，返回str中第一个与patt匹配的子串的起始位置，其忽略标志g，也忽略patt的lastIndex属性，总是从字符串的开始进行检索，若不匹配则返回-1；
②str.match(patt)，返回一个包含匹配结果的数组，若有标志g则进行全局匹配；
③str.replace(patt, str_re)其返回一个新的字符串，使用str_re(也支持函数，其将匹配的子串调用函数，使用函数返回的结果替换匹配的子串)替换patt，若有标志g则进行全局替换；
④str.split(patt/str1, count)使用str1或patt匹配的子串分割str，返回一个字符串数组(若patt中有分组，则匹配分组的子串也在返回的数组中)，可指定分割次数若不设置则默认全部分割。

浏览器对象模型：
①window对象，window.innerWidth/innerHeight浏览器窗口的宽度/高度，window.open/close/moveTo/resizeTo()打开/关闭/移动/调整窗口尺寸；
②screen对象，screen.availHeight/screen.availWidth屏幕的可用高度/宽度；
③location对象，用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面，location.href/hostname/port/protocol当前页面的url/主机域名/端口/web协议，location.assign(‘url’)在当前窗口打开新的页面；
④history对象，history.back/forward()加载历史列表中的前/后一个url，但由于安全问题做出了限制；
⑤navigator对象，可用于获取浏览器的版本/名称/引擎等信息，但其信息可被改变，不同的浏览器支持不同的对象(使用window.chrome等)；
⑥消息框对象，需要用户点击才能继续执行，alert()/confirm()/prompt(‘文本’，默认值)其中confirm确认(用户点击确认返回true，取消返回false)，prompt(确认返回输入值，取消返回null)；
⑦计时对象，t = setTimeout(‘js语句’, 1000毫秒)，clearTimeout(t)，两者的作用分别为1000毫秒后执行js语句，和取消setTimeout的执行。

JSON：JavaScript 对象表示法（JavaScript Object Notation）(一种数据格式)
JSON 是存储和交换文本信息的语法，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
在与后端交互时需要发送json对象，javascript对象与json对象有所不同，如下：
js对象：{name:"myname",password:123456}(即属性名没有引号)
json对象："{"name":"myname","password":123456}"(属性名带引号，并且整体是一个大字符串，必须使用双引号)
在js中两者的转换关系为：
js对象 = JSON.parse(json字符串)；
json对象 = JSON.stringify(js对象)；
在与服务器后端交互时，使用后端语言中的模块可以将json格式字符串转换为其对应的一种映射数据结构。

XML：也是一种数据格式，不过是以HTML标签的方式将数据括起来，如<xml><Content><![CDATA[你好]]></Content></xml>，其中<![CDATA[xx]]>意为转义，即原始字符串不参与解析，将需要的内容以此种格式发送，其在编程语言中一般也是解析为字典键值对格式进行提取数据，python中提供了xmltodict包用于解析xml格式数据为字典。现一般用json格式数据。

focus()方法：为元素赋予焦点，就是将光标放在输入框中，省掉了点击的那一下，直接输入要输入的内容。

js中的this对象：出现在函数中，始终代表调用当前函数的那个对象，共有四种模式①方法调用，即函数作为一个对象的方法被调用时，this = 此对象；②函数调用模式，当一个函数并非某个对象的方法时(即使是嵌套调用，如a.b= function c(){d()})，this绑定为全局对象；③构造函数模式，即将函数作为对象构造器来调用，此时函数中的this指代新创建的对象；④事件处理中的this指代接收此事件的HTML元素⑤apply调用模式。

js中的document对象与window对象：window指窗体，window对象表示浏览器中打开的窗口；document指页面，document是window的一个子对象、一个对象属性；用户不能改变document.location(因为这是当前显示文档的位置)，但可以改变window.location(用其它文档取代当前文档)，window.location本身也是一个对象, 而document.location不是对象。

异常处理：try{if(){throw ''}; if(){throw ''};}catch(err){}，其中err.message是错误的具体信息，可以通过throw 'xxx’抛出异常，其中xxx为异常本身(即自定义的异常名，此异常无异常详细信息，可自定义异常函数/类设置)；

执行次序：HTML文档中JS代码与HTML标签是按次序执行的，因此若要在现有页面基础上做改动，则①使用函数，通过一定的触发方式提交②将JS代码放置在页面最下方，否则JS生成的代码会被覆盖或找不到值，甚至不能执行；

HTML DOM(Document Object Model)：文档对象模型，将文档视为树结构，把HTML中所有的元素均视为节点，所有的节点均可以被创建或修改，父(parent)、子(child)、同胞(sibling)、根(root)用于描述节点关系，注意如<p>xxx</p>，p元素是一个节点，其child为文本节点’xxx’，即p元素本身不包括文本。

①方法：如表所示，这些方法所有DOM元素均可使用，TagName()即根据标签筛选节点(返回一个列表，支持.length()方法，可通过遍历或下标来访问)；例如：a.insertBefore(b,c)在a中将b添加到c之前；

②属性：innerHTML获取指定元素的内容，不包括标签；对DOM元素来说，其属性都是本元素的一个子节点，即可使用x.style.color ='red'来改变字体的颜色；a.parentNode为a节点(需要先使用ID获取)的父节点；
③事件：如点击/改动文本等都可以作为事件，注意当将元素作为DOM时需要为每一个事件分配一个单独的函数，即document.getxxx().οnclick=function(){},若要调用其他函数，则需要进行嵌套function(){xxx()}，否则无法识别，可以对元素直接添加事件属性，调用函数时无需嵌套但需要添加双引号<p onclick='func()'>；

注：
①在DOM中，每个标签都是单独的节点，其下若有文本内容则有文本子节点，若无则无，如无子节点也无节点值，有value属性；

②获取元素内容：使用innerHTML属性或childNodes(返回一个列表，即使只有一个子节点也返回列表)/nodevalue(返回一个节点的节点值，注意如果是文本节点则返回文本，如果不是文本节点则返回null，一般与childNodes配合查询文本节点)，textContent返回一个节点的所有子节点的文本内容，注意innerHTML属性可以直接赋值，nodevalue不能赋值只用于返回，例如要修改HTML文档中id为’a’的节点文本值：document.getElementById("a").innerHTML='qwer'

jQuery
jQuery 是一个 JavaScript 库，其位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
可以使用<script type="text/javascript" src="jquery.js"></script>将下载好的jQuery文件导入，或是直接通过url链接到其他网站上

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>

①jquery可以完成动画/隐藏/淡入淡出等效果，直接使用jquery效果方法即可，jquery支持的选择器如表所示；

②jquery获取/修改/删除元素的内容：
Ⅰ获取，$().text()返回所选元素的文本内容，$().html()返回所选元素的内容(包括html标记)，$().val()返回所选元素的value(只可用于表单元素)；
Ⅱ修改，$().text('qq')设置所选元素的文本内容，其余类似；
Ⅲ删除，$().remove()删除被选元素及其子元素，$().empty()清空子元素；
Ⅳ添加，$().append()在被选元素的结尾插入内容，可直接使用'<p>12</p>'此类带标签的字符串，也可以使用变量和DOM，prepend()在被选元素的开头插入内容，after()在被选元素之后插入内容，before()在被选元素之前插入内容；
其中text()html()val()都支持回调函数；

③jquery元素的属性：
$().attr('属性名')获取属性值，$().attr('属性名', '新值')设置属性值，也可以使用字典对象同时设置多个属性值。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素自己自定义的DOM属性，在处理时，使用attr方法。

④jquery操作CSS：
$().addClass('t1 t2')向被选元素添加一或多个类选择器，removeClass()删除指定的类选择器，toggleClass()对被选元素进行添加/删除类的切换操作；
$().css('color')返回指定的css属性的值，$().css('color', 'red')设置指定的css属性，也可使用字典对象同时设定多个css属性；
jquery提供了多个处理尺寸的方法，如width()/height()等，用法与text类似。

⑤jquery支持的一部分事件如表所示；

jquery的遍历：①父元素，$().parent()/parents()/parentsUntil()，分别返回被选元素的直接父元素/所有父元素/介于给定元素之间的父元素，返回的可以是一个由父元素组成的列表/数组；
②子元素，$().children()/find('p')，返回直接子元素/被选元素的后代元素中的选中元素；
③同胞元素，即位于同一个父元素下的元素，$().siblings()返回所有同胞元素，.next()/nextAll()返回下一个同胞元素/所有跟随的同胞元素，也有prev()/prevAll()等；
④过滤，first()返回被选元素的首个元素(被选元素可能是个列表)，last()类似，filter()在被选元素中重新筛选，not()返回不带xx的元素。

jQuery Ajax(Asynchronous JavaScript and XML)：异步JS和XML，即在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
①加载，$().load(URL, data, callback)，其中URL为希望加载的URL，data为希望传递的参数一般使用字典形式，callback为回调函数，即请求发送成功后调用的函数，注意回调函数中的参数即访问的URL(一般有视图函数)返回的值；
②发送请求，$.get(URL, callback)，$.post(URL, data, callback)，其中参数与load类似，但发送请求的方式不同；
③在$.get()中，若以js对象形式传入第二个参数，则会自动拼接为?a=1&b=2的形式，拼接到url中；

注：①如<p>qwer<a>1234</a></p>jquery中没有直接获取文本’qwer’的方法，必须要借助DOM的操作方式，$('p').prop('firstChild').nodeValue；
②jQuery中的$符号是jQuery的简称，在$符号冲突等一些特殊情况中，可以使用jQuery全程来代替，效果相同，jQuery.post()；
③注意$.post('url', data, function)如果将data作为js对象直接传入，则在后端中是以表单形式提交，若要以json格式提交则需要使用JSON.stringify将对象转换，对于后端来说，若前端使用ajax请求则必须返回一个json格式的字符串；
④ajax的完整形式如图所示，简写形式其实是按位置参数的方式将参数写入，即如果需要的话可以$.get('url', function(){}, 'json')表明后端传送回来的数据为json格式，但一般不必要；

⑤在jquery中可以阻止表单的提交事件，例如：

$(".form-register").submit(function(e){
        e.preventDefault();
})

⑥jquery中，$().serializeArray()可以提取表单的所有数据，返回值为一个数组，其中元素是表单中的对象，{name:'xx', value:'qq'}，但其对于复选框的支持不好，只能输出一个值，因此对于复选框一般需要特殊操作，令其形成数组；
⑦当一个页面中所有的JS全部失效，可能是引入jquery文件错误，也可能是语法错误，例如：定义函数时没有加()，如类似'function{}'(缺少())会引起全部JS代码失效。

由于是以后端应用为目的的了解，因此对于js语言只进行了很浅显的学习，并重点关注了jquery和ajax，文中表格引自http://www.w3school.com.cn/。