本文是针对JS的一个小总结，示例代码较少，偏向于理论总结；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title id="titleList">js练习专题--登录</title><!--注：由于js的实现场景类型过多，这里只说明最基础的js，其他的可以做成小模块--> <style>/*CSS练习*/ html,body{height: 98%;width: 99%;}/*如此设置与浏览器有关，浏览器默认html或body的默认宽度/高度不是100%，需要手动设置*/ #name,#password{background: #FFFFFF} #alldiv{height: 100%;width: 100%;background: #FFFFFF} #shang{height: 10%;width: 100%;background: #FFFFFF} #titleList{height: 50%;width: 10%;background: #FFFFFF} #zhong{height: 85%;width: 100%;background: #ffffff;} #zhong1{float: left;width: 20%;height: 100%;background: #ffffff;} #zhong2{float: left; height: 100%;width: 60%;background: #ffffff;text-align: center} #zhong3{float: left;width: 20%;height: 100%;background: #ffffff;} #xia{height: 5%;width: 100%;background: #FFFFFF;text-align: center} #denglushuru{height:15%;width:20%;left: 0;top: 0;right: 0;bottom: 0;background: #ffffff;position: absolute;margin: auto;} </style> <!--script练习--> <!--js是一种操作html的编程语言，由浏览器执行，可插入html中，官方名称：ECMA-262--> <script>/*js代码一般放在head中，方便统一管理*/ </script> </head> <body> <div id="alldiv"> <div id="shang"> </div> <div id="zhong"> <div id="zhong1"> </div> <div id="zhong2"> <div id="denglushuru"> <div> 登录名称 <input id="name" type="text" style="text-align: center"> </div> <div> 登录密码 <input id="password" type="password" style="text-align: center"> </div> <br> <span> <input type="button" value="登录"> <input type="button" value="重置"> </span> </div> </div> <div id="zhong3"> </div> </div> <div id="xia"> 蒙ICP备18003238号 <br> author:zhm </div> </div> <script src="login.js"></script><!--外部js，js一般放到html最后，因为浏览器是从上到下加载html的，js先加载可能有的元素找不到--> </body> </html>
--------------------------
/*内容输出*/ /*弹出警告框*/ function showTitle(){ window.alert(document.getElementById('titleList').innerHTML); } /*内容输出到html，慎用，将会覆盖页面*/ // document.write("<button onclick='showTitle()'>查看title</button>"); /*写入到html中*/ document.getElementById('titleList').innerHTML = 'xxxxxxx';/*必须等html页面元素加载完之后才能找到，否则一直报错*/ /*同样打印日志，用于调试，但是比与alert不同，不会打断程序执行*/ console.log("titleList="+document.getElementById('titleList').innerHTML) /** * JS功能划分为三部分：1.渲染数据;2.操作DOM;3.操作cookie等存储机制API * * @JS数据类型 * 字面量（也就是固定值）种类：也是JS的数据类型种类； * 数字字面量：1.2.3.4.5...;无限大:Infinity;数字的表示方式有二/八/十六进制;NaN非数字;有其特有的属性和方法; * 字符串字面量:'wahha','shuangwaiwai' * 表达式字面量:1+2,5*9 * 数组字面量:[1,2,3,4,5,9] * 对象字面量:{firstName:'Zheng',lastName:'haoMiao',age:18,eyeColor:'black'} * 函数字面量:function myFunction(a,b){return a*b;} * 具体的数据类型：字符串(String)/数字(Number)/布尔(Boolean)/数组(Array)/对象(Object)/空(Null)/未定义(Undefined) * /对象(特殊的数据类型，拥有属性和方法,包括：Number对象;字符串对象;日期对象;数组对象;boolean对象;Math对象;正则表达式对象) * * * JS数据特点： * 动态类型，同一个变量可以赋值不同的数据类型 * 字符串表示方式灵活，可用单引号/双引号，将双引号引入文本中需要使用转义符号，比如：/",且字符串的下标从0开始； * 字符串可以是对象（var a = new String("zzz");），而对象和变量时不相等的； * 作为对象，字符串有自己的属性和方法；作为普通字符串，可以使用内置属性length获得长度； * 字符串可以通过+号进行拼接，其中空格也需要拼接进去; * 数字类型：只有一种类型，可用科学技术法方式表示；var a = 1;var b = 1.23e2(相当于123)，但是也是有精度的 * (http://www.runoob.com/w3cnote/js-precision-problem-and-solution.html)； * 布尔boolean：true/false * 数组：var a = new Array(); a[1] = 'SSA';var b = new Array('Saas','Paas');var c = ["Saas","Paas"] * 对象：person = {age:'18',name:'daXiong'};其中属性用键值对形式表示； * Undefined:表示该变量不含值 * Null:清空变量 * 函数：可以有参数、返回值、自己的局部变量（作用范围为整个函数内） * 全局变量的生命周期：被声明后开始，页面关闭后结束；除了全局变量和局部变量之外，还有一种叫"windows属性" * 特殊操作符：typeof:可以直接返回对应的类型; * 统计：JS中有5种数据类型：string;number;boolean;object;function; * 3种对象类型：Object;Date;Array; * 2种不包含任何值的数据类型：undefined;null; * 【专题】：数据类型之间的转换--看API(http://www.runoob.com/js/js-type-conversion.html)---做成js弹框； * * @JS计算 * 运算符 * 算数运算符：除/;加+;乘*;减-;取余%;自增++;自减--; * 赋值运算符：等于=;加等+=;减等-=;乘等*=;除等/=;取余等%=; * 条件、比较、逻辑运算符：==(字面值相等);===(绝对相等，包括数值与类型);!=(不等于);!==(不绝对等于，有一个不等就成立); * >(大于);<(小于);>=(大于等于);<=(小于等于);&&(与);||(或);!(非);最好用的三目运算符：a = c>d?e:f; * * @JS流程控制 * JS有自己的关键字，也就是有自己的表示方法； * JS中关键的语句标示符（常用的关键字）： * 流程控制：break;continue;do...while;for;for...in;if...else;switch;while; * for...in循环是遍历对象的属性; * break的强大作用：不同于continue只能用在循环中，break配上标签使用后可以跳出任何代码块; * 捕捉异常：catch;throw;try; * 函数与变量：function;return;var; * * * @JS正则表达式 * 【专题】-整理 * * @JS错误 * try：测试代码错误 * catch：处理错误 * throw：创建自定义错误(catch中使用) * * @JS调试 * console.log(); * 打入断点进行调试; * 使用debugger，调用调试函数; * * @对html的应用 * 表单验证：使用onsubmit事件，调用函数; * API约束：对接html元素中设置的属性约束，如max约束数值，可以设置响应的提示信息，验证方式 * * @JSON语法 * 【专题】-整理 * json格式化之后是js对象； * * @JS函数定义 * 自调用函数：不需要别人调用，自己主动调用自己，但是没有函数名，是匿名自调用函数；格式:(function(){...内容}()) * 参数的初始化方法：y = y||0; * 内置arguments对象，可以用来操作参数数组，方法中可以不写相应的显式参数； * 函数的使用方式：作为全局对象(window的方法)/作为变量中方法调用/作为构造函数使用(需要时候new关键字)/ * 使用函数方法call()或apply()调用; * 构造函数中也可以设定/初始化其他的函数; * JS的闭包的使用，不懂; * * @htmlDom(文档对象模型) * js通过htmlDom可以访问html中的所有元素，帮助访问元素的;(可以用来修改html内容/属性，改变CSS样式，监听事件) * js查找html元素方式： * id:document.getElementsById("xxx"); * 标签:document.getElementsByTagName("xxx"); * 类名:document.getElementsByClassName("xxx"); * * @htmlDom教程 * 文档对象模型 * 改变html方法： * document.write("xxx"); * document.getElementById(id).innerHTML=新的HTML;(改变html内容) * document.getElementById(id).属性=新属性值;(改变html属性) * 改变html样式: * document.getElementById(id).style.样式属性=新样式; * 结合事件的使用： * 就可以在触发相应事件后，对html做出相应改动；而且事件也是属性，所以可以在JS代码中对元素设置相应事件； * document.getElementById("myBtn").onclick=function(){displayDate()}; * 为元素添加相应监听：一个元素可以添加多种监听 * element.addEventListener(event, function, useCapture); * event是监听的动作,function是调用的函数,useCapture是使用的捕获(从外到内触发)还是冒泡方式(从内到外触发)； * 相反的方法：element.removeEventListener("mousemove", myFunction);移除监听 * 创建新的节点元素：[对元素的各种操控，用到再找] * 添加元素，创建节点； * 移除元素； * 替换元素； * Dom的集合Collection的操作；是个元素的集合； * Dom的节点列表Nodelist的操作；是一个节点，用于存放元素； * * @htmlBOM教程 * 浏览器对象模型：常用对象： * window对象：常用方法(open;close;moveTo;resizeTo) * window的特别方法：计时(执行-setInterval;停止-clearInterval;定时间后执行-setTimeout;停止-clearTimeout); * window.screen对象(可省略window)：表示有关屏幕的信息 * window.Location对象：获取URL,常用方法(hostname;pathname;port;protocol) * window.history对象：处理浏览器历史的信息 * window.Navigator对象：有关访问者的信息 * * * @JS其他特性 * JS是操作HTML的脚本语言，所以对HTML的操作是重点，在html页面中直接使用JS的事件属性 * 常用JS事件属性：onchange();onclick();onmouseover();onmouseout();onkeydown();onload(); * JS常用转义字符：\';\";\\;\n;\r;\t;\b;\f; * JS语句分隔符：分号； * 注释：单行：//;多行：/ * * /; * JS对大小写敏感,但是忽略空格，所以可以用空格提高代码可读性；可以用"\"折行 * JS的【严格模式】："use strict",可在脚本或者函数头部添加;(严格模式的特点：http://www.runoob.com/js/js-strict.html) * JS默认代码的最后一行自动结束，所以折行是不允许的，所以有的语句忘记加分号也没有报错; * 消息框:三种：警告框(alert)、确认框(confirm)、提示框(prompt) * cookie的使用：js可以获取和设置cookie来发给服务器进行使用 * * 完结： * 附上：工具文档：http://www.runoob.com/jsref/jsref-tutorial.html * * */