算法

2026-02-03 10:33:35 +08:00 · 2021-03-09 21:28:25 +08:00
parent 26759fc0bd
commit 03c201fbff
63 changed files with 2782 additions and 0 deletions
--- a/JavaScript/教程/DOM对象.md
+++ b/JavaScript/教程/DOM对象.md
@@ -0,0 +1,196 @@
+\>简介
+
+\>\>document object
+model：文档对象模型，将HTML文档呈现为带有元素、属性和文本的树结构，成为节点树
+
+\>\>三种DOM结点;
+
+>   元素节点：\<html\>\<body\>\<p\>(tag)
+
+>   文本节点：\<li\>\</li\>\<script\>\<css\>
+
+>   属性节点：元素属性\<a href = "http://"\>其中href即为元素的属性
+
+![713150815405.png](media/41b23d86a383cc654da42e8957b33725.png)
+
+\>\>节点属性：
+
+>   nodeName：
+
+>   1\. 元素节点的 nodeName 与标签名相同
+
+>   2\. 属性节点的 nodeName 是属性的名称
+
+>   3\. 文本节点的 nodeName 永远是\#text
+
+>   4\. 文档节点的 nodeName 永远是\>\#document
+
+>   nodeType：节点类型1-\>元素节点；2-\>属性节点；3-\>文本节点
+
+>   nodeValue：节点值，元素节点返回null，属性节点返回属性值，文本节点返回文本内容
+
+>   1\. 元素节点的 nodeValue 是 undefined 或 null
+
+>   2\. 文本节点的 nodeValue 是文本自身
+
+>   3\. 属性节点的 nodeValue 是属性的值
+
+>   childNodes：返回子节点数组（只有元素节点有子节点）
+
+>   firstChild：返回第一个子节点
+
+>   lastChild：返回最后一个子节点
+
+>   nextSibling：返回下一个兄弟节点
+
+>   previousSibling：返回节点的上一个兄弟节点
+
+>   parentNode：返回节点的父节点。
+
+\>\>节点方法（是document对象的节点方法）
+
+>   write()：写入内容到文档
+
+>   getElementBYId()：返回指定ID的元素
+
+>   getElementsByTagName()：返回带有制定标签名的所有元素（是一个数组）
+
+>   get/setAttribute('key', 'value')：返回设置属性节点
+
+\>\>其他元素的结点方法：
+
+| 节点方法                         | 说明                           |
+|----------------------------------|--------------------------------|
+| createElenment('tafName')        | 创建元素节点                   |
+| createTextNode(‘text’)           | 创建文本节点                   |
+| appendChild(o)                   | 在父节点末尾附加子节点         |
+| reateDocumentFragment()          | 创建文档片段                   |
+| removeChild(oP)                  | 删除节点                       |
+| replaceChild(newOp,targetOp)     | 替换节点                       |
+| insertBefore(newOp,targerOp)     | 已有的子节点前插入一个新的节点 |
+| insertAfter(newOp,targetOp)      | 已有的子节点后插入一个新的节点 |
+| get/setAttribute('key', 'value') | 设置或得到属性节点             |
+| clonNode(true/false)             | 复制节点                       |
+
+\>元素内容
+
+>   innerHTML（替换时包括其中的html标签）
+
+>   innerText（替换时只有其中的文本内容）
+
+>   修改p标签的这两个值会得到不同的结果
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168)
+[copy](http://blog.csdn.net/estom_yin/article/details/51898168)
+
+1.  **\<span** style="font-size:14px;"**\>\<body\>**
+
+2.  **\<p\>**JavaScript**\</p\>**
+
+3.  **\<p\>**JavaScript**\</p\>**
+
+4.  **\<input** type="button" id="inp" value="click"**\>**
+
+5.  **\<script** type="text/javascript"**\>**
+
+6.  var inp = document.getElementById('inp');
+
+7.  inp.onclick = function(){
+
+8.  var ip = document.getElementsByTagName('p');
+
+9.  alert(ip[0].innerHTML);
+
+10. ip[0].innerHTML = "\<i\>hello\</i\>";
+
+11. ip[1].innerText = "\<i\>hello\</i\>";
+
+12. }
+
+13. **\</script\>**
+
+14. **\</body\>\</span\>**
+
+![713160404053.png](media/a287b11ce3f0470882a238120c33a6bb.png)
+
+![713160410069.png](media/04d4031de63e53c5addd72792a6b60bd.png)
+
+\>元素样式
+
+>   方法：
+
+>   style属性，能够创建新的属性并赋值
+
+>   className属性，只能改变标签的类属性，使用已经有的类来改变标签的属性
+
+>   语法：
+
+>   object.style.property = new style;
+
+>   object.style.className = "class"
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168)
+[copy](http://blog.csdn.net/estom_yin/article/details/51898168)
+
+1.  **\<span** style="font-size:14px;"**\>\<body\>**
+
+2.  **\<h2** id="ih"**\>**JavaScript**\</h2\>**
+
+3.  **\<input** type="button" id="inp" value="click"**\>**
+
+4.  **\<script** type="text/javascript"**\>**
+
+5.  var inp = document.getElementById("inp");
+
+6.  inp.onclick = function () {
+
+7.  var oh = document.getElementById("ih");
+
+8.  oh.style.color = "red";
+
+9.  oh.style.width = "300px";
+
+10. oh.style.backgroundColor = "\#CCC";
+
+11. }
+
+12. **\</script\>**
+
+13. **\</body\>\</span\>**
+
+\>显示和隐藏
+
+>   display = none 或者block
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168)
+[copy](http://blog.csdn.net/estom_yin/article/details/51898168)
+
+1.  **\<span** style="font-size:14px;"**\>\<body\>**
+
+2.  **\<p** id="ip"**\>**你可以把我隐藏，也可以让我显示哦\~**\</p\>**
+
+3.  **\<input** type="button" id="ihide" value="hide"**\>**
+
+4.  **\<input** type="button" id="ishow" value="show"**\>**
+
+5.  **\<script** type="text/javascript"**\>**
+
+6.  var op = document.getElementById("ip");
+
+7.  var inp = document.getElementsByTagName("input");
+
+8.  inp[0].onclick = function () {
+
+9.  op.style.display = "none";
+
+10. }
+
+11. inp[1].onclick = function () {
+
+12. op.style.display = 'block';
+
+13. }
+
+14. **\</script\>**
+
+15. **\</body\>\</span\>**
--- a/JavaScript/教程/DOM对象三.md
+++ b/JavaScript/教程/DOM对象三.md
@@ -0,0 +1,99 @@
+\>页面尺寸
+
+\>\>宽高尺寸
+
+>   clientWidth / clientHeight窗口的宽度高度
+
+>   scrollWidth / scrollHeight文档内容的高度宽度
+
+>   offsetWidth / offsetHeight文档内容的高度宽度
+
+\>\>坐标位置
+
+>   scrollleft / scrollTop滚轴的水平便宜距离，垂直偏移距离
+
+>   offsetLeft / offsetTop对象与页面的边距
+
+>   event.clientX /
+>   event.clientY事件触发时，鼠标指针对窗口的水平垂直坐标(event为时间)
+
+//注意事项：documentElement是整个节点树的根节点root，即html标签，document.body也是document能直接调用的属性标签
+
+语法：
+
+>   object.offsetLeft/oobject.offsetTop
+
+\>拖拽功能的实现
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51900581)
+[copy](http://blog.csdn.net/estom_yin/article/details/51900581)
+
+1.  **\<html\>**
+
+2.  **\<head\>**
+
+3.  **\<meta** charset="UTF-8"**\>**
+
+4.  **\<title\>**event**\</title\>**
+
+5.  **\<style\>**
+
+6.  \#box {
+
+7.  width: 100px;
+
+8.  height: 100px;
+
+9.  background-color: aquamarine;
+
+10. position: absolute;
+
+11. }
+
+12. **\</style\>**
+
+13. **\</head\>**
+
+14. **\<body\>**
+
+15. **\<div** id="box"**\>\</div\>**
+
+16. **\<script** type="text/javascript"**\>**
+
+17. var oDiv = document.getElementById("box");
+
+18. oDiv.onmousedown = function(ev){
+
+19. var oEvent = ev;
+
+20. var disX = oEvent.clientX-oDiv.offsetLeft;
+
+21. var disY = oEvent.clientY-oDiv.offsetTop;
+
+22. document.onmousemove = function(ev){
+
+23. oEvent = ev;
+
+24. oDiv.style.left = oEvent.clientX - disX +"px";
+
+25. oDiv.style.top = oEvent.clientY - disY +"px";
+
+26. }
+
+27. document.onmouseup = function(){
+
+28. document.onmousemove = null;
+
+29. document.onmouseup = null;
+
+30. }
+
+31. }
+
+32. 
+
+33. **\</script\>**
+
+34. **\</body\>**
+
+35. **\</html\>**
--- a/JavaScript/教程/DOM对象二——节点与遍历.md
+++ b/JavaScript/教程/DOM对象二——节点与遍历.md
@@ -0,0 +1,306 @@
+\>父子节点
+
+\>\>childNode
+
+>   使用语法：elementNode.childNodes
+
+>   注意事项：空白节点会被浏览器但顾总文本节点
+
+\>\>firstChild lastChild
+
+>   使用语法：node.firstChild node.lastChild
+
+\>\>parentNode
+
+>   使用语法:elementNode.parentNode
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
+[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
+
+1.  **\<span** style="font-size:14px;"**\>\<body\>**
+
+2.  **\<ul** id="father"**\>**
+
+3.  **\<li\>**大娃**\</li\>**
+
+4.  **\</ul\>**
+
+5.  **\<script** type="text/javascript"**\>**
+
+6.  var li_num = 0;
+
+7.  var childNodes = document.getElementById("father").childNodes;
+
+8.  for(var i = 0; i **\<** **childNodes.length**; i++){
+
+9.  document.write("节点名：" + childNodes[i].nodeName + " ");
+
+10. document.write("节点类型：" + childNodes[i].nodeType + " ");
+
+11. if(childNodes[i].nodeType == 1){
+
+12. document.write("我是" + childNodes[i].innerHTML + "**\<br\>**");
+
+13. li_num++;
+
+14. }
+
+15. else{
+
+16. document.write("**\<br\>**");
+
+17. console.log("这是一个空节点，不用理他");
+
+18. }
+
+19. }
+
+20. document.write("子节点数目：" + childNodes.length + "**\<br\>**");
+
+21. document.write("li 子节点数目：" + li_num + "**\<br\>**");
+
+22. document.write("文本子节点数目：" + (childNodes.length - li_num));
+
+23. **\</script\>**
+
+24. **\</body\>\</span\>**
+
+//补充节点的属性还有title！
+
+\>兄弟节点
+
+>   previousSibling nextSibling
+
+>   使用语法：
+
+>   nodeobject.nextSibling / previousSibling
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
+[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
+
+1.  **\<span** style="font-size:14px;"**\>\<body\>**
+
+2.  **\<ul** id="father"**\>**
+
+3.  **\<li** title="force_max"**\>**大娃**\</li\>**
+
+4.  **\<li** id="second_children"**\>**二娃**\</li\>**
+
+5.  **\<li** title="fire"**\>**三娃**\</li\>**
+
+6.  **\</ul\>**
+
+7.  **\<script** type="text/javascript"**\>**
+
+8.  function getprenode(node){
+
+9.  var prenode = node.previousSibling;
+
+10. while(prenode && prenode.nodeType != 1){
+
+11. prenode = prenode.previousSibling;
+
+12. }
+
+13. return prenode;
+
+14. }
+
+15. function getnextnode(node){
+
+16. var nextnode = node.nextSibling;
+
+17. while(nextnode && nextnode.nodeType != 1){
+
+18. nextnode =nextnode.nextSibling;
+
+19. }
+
+20. return nextnode;
+
+21. }
+
+22. var second_children = document.getElementById("second_children");
+
+23. var first_children = getprenode(second_children);
+
+24. var third_children = getnextnode(second_children);
+
+25. alert(first\_children.innerHTML+first_children.title);
+
+26. alert(third\_children.innerHTML+third_children.title);
+
+27. **\</script\>**
+
+28. **\</body\>\</span\>**
+
+//虽然觉得这是史上最无聊的程序，但还是含泪贴上了
+
+\>创建节点方法
+
+>   createElement('tagName'):创建节点
+
+>   crreateTextNode("text")：穿件文本节点
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
+[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
+
+1.  **\<span** style="font-size:14px;"**\>** var newinp =
+    document.createElement("input");
+
+2.  alert(newinp);
+
+3.  var newtext = document.createTextNode("text");
+
+4.  alert(newtext);**\</span\>**
+
+\>添加删除节点
+
+>   nodeobject.appendChild(newnode)：父节点末尾添加
+
+>   nodeobject.removeChild(node)：删除节点
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
+[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
+
+1.  **\<span** style="font-size:14px;"**\>\<body\>**
+
+2.  **\<ul** id="father"**\>**
+
+3.  **\<li\>**大娃**\</li\>**
+
+4.  **\</ul\>**
+
+5.  **\<input** type="button" id="createbtn" value="祭出紫金葫芦"**\>**
+
+6.  **\<script** type="text/javascript"**\>**
+
+7.  function createnode(){
+
+8.  var btn = document.createElement("input");
+
+9.  btn.setAttribute("type", "button");
+
+10. btn.setAttribute("name", "紫金葫芦");
+
+11. btn.setAttribute("value", "吸进去");
+
+12. btn.setAttribute("onclick", "removenode()");
+
+13. document.body.appendChild(btn);
+
+14. }
+
+15. function removenode(){
+
+16. var fnode = document.getElementById("father");
+
+17. var nodes = fnode.childNodes;
+
+18. for(var i = 0; i **\<** **nodes.length**; i++){
+
+19. if(nodes[i] && nodes[i].nodeType == 1){
+
+20. var rm = fnode.removeChild(nodes[i]);
+
+21. rm = null;
+
+22. break;
+
+23. }
+
+24. }
+
+25. }
+
+26. var createbtn = document.getElementById("createbtn");
+
+27. createbtn.onclick = createnode;
+
+28. **\</script\>**
+
+29. **\</body\>\</span\>**
+
+//有很多需要注意的地方，等吃饭回来补充
+
+>   appendChild()方法的主体必须使父节点，而且只能添加到节点对类的末尾
+
+\>插入节点
+
+>   fnode.insertBefore(newnode，node)：可以指定插如节点的位置（在node之前）返回值是插入的节点
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
+[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
+
+1.  **\<span** style="font-size:14px;"**\>\<body\>**
+
+2.  **\<ul** id="father"**\>**
+
+3.  **\<li\>**二娃**\</li\>**
+
+4.  **\</ul\>**
+
+5.  **\<input** type="button" id="add-btn" value="add"**\>**
+
+6.  **\<script** type="text/javascript"**\>**
+
+7.  function addnode(){
+
+8.  var fnode = document.getElementById("father");
+
+9.  var newnode = document.createElement("li");
+
+10. newnode.innerHTML = "大娃";
+
+11. fnode.insertBefore(newnode, fnode.childNodes[0]);
+
+12. }
+
+13. var add = document.getElementById("add-btn");
+
+14. add.onclick = addnode;
+
+15. **\</script\>**
+
+16. **\</body\>\</span\>**
+
+\>替换子节点（克隆替换）
+
+>   fonde.replaceChild(newnode, oldnode) //返回值是被替换的节点
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305)
+[copy](http://blog.csdn.net/estom_yin/article/details/51899305)
+
+1.  **\<span** style="font-size:14px;"**\>\<body\>**
+
+2.  **\<ul** id="father"**\>**
+
+3.  **\<li** id="first"**\>**大娃**\</li\>**
+
+4.  **\<li\>**二娃**\</li\>**
+
+5.  **\</ul\>**
+
+6.  **\<input** type="button" id="replace-btn" value="replace"**\>**
+
+7.  **\<script** type="text/javascript"**\>**
+
+8.  function replacenode(){
+
+9.  var oldnode = document.getElementById("first");
+
+10. var newnode = document.createElement("li");
+
+11. newnode.innerHTML = "金刚葫芦娃";
+
+12. oldnode.parentNode.replaceChild(newnode, oldnode);
+
+13. }
+
+14. var replace = document.getElementById("replace-btn");
+
+15. replace.onclick = replacenode;
+
+16. **\</script\>**
+
+17. **\</body\>\</span\>**
--- a/JavaScript/教程/DOM简介.md
+++ b/JavaScript/教程/DOM简介.md
@@ -0,0 +1,155 @@
+\>DOM树（document_object_moudule）
+
+![724101446557.png](media/75813153285d5ceb04c812e98c3b33a1.png)
+
+\>\>DOM定义
+
+是w3c文档对象模型，是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档内容、结构和样式。
+
+\>\>DOM的组成
+
+-   核心 DOM - 针对任何结构化文档的标准模型
+
+-   XML DOM - 针对 XML 文档的标准模型
+
+-   HTML DOM - 针对 HTML 文档的标准模型
+
+\>DOM节点（通过结点树的方法指明了各个元素之间的关系）
+
+\>\>文档节点、元素节点、文本节点、属性节点、注释节点
+
+\>\>所有的结点都可以通过JS进行访问、所有的HTML元素节点都可以别修改，也可以创建删除节点
+
+\>\>节点关系
+
+-   再节点树中，顶端点被称为根
+
+-   每个节点都有父节点
+
+-   一个节点可拥有任意数量的子节点
+
+-   同胞是拥有相同父节点的结点
+
+\>DOM方法（通过定义类的对象的方法，实现了访问结点）
+
+\>\>编程接口
+
+可以通过JS等脚本语言对HTML_DOM进行访问
+
+所有的HTML元素都被定义为对象，而编程接口则是对象的方法和对象的属性
+
+方法是能够执行的动作（添加或修改元素节点）
+
+属性是能够获取或设置的值（节点的名称或内容）
+
+\>\>常用的HTML_DOM方法和属性
+
+方法：
+
+访方法id,tagName,ClassName
+
+修改方法修改内容、修改样式、修改属性、创建节点、删除节点。
+
+修改内容
+
+document.getElementById("p1").innerHTML="New text!";
+
+修改样式
+
+document.getElementById("p2").style.color="blue";
+
+创建节点
+
+var node=document.createTextNode("This is new.");
+
+使用事件节点
+
+\<input type="button" onclick="document.body.style.backgroundColor='lavender';"
+value="Change background color" /\>
+
+添加元素
+
+para.appendChild(node);
+
+element.insertBefore(para,child);
+
+删除元素
+
+parent.removeChild(child);
+
+替换元素
+
+parent.replaceChild(para,child);
+
+| 方法                     | 描述                                                            |
+|--------------------------|-----------------------------------------------------------------|
+| getElementById()         | 返回带有指定 ID 的元素。                                        |
+| getElementsByTagName()   | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
+| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。                      |
+| appendChild()            | 把新的子节点添加到指定节点。                                    |
+| removeChild()            | 删除子节点。                                                    |
+| replaceChild()           | 替换子节点。                                                    |
+| insertBefore()           | 在指定的子节点前面插入新的子节点。                              |
+| createAttribute()        | 创建属性节点。                                                  |
+| createElement()          | 创建元素节点。                                                  |
+| createTextNode()         | 创建文本节点。                                                  |
+| getAttribute()           | 返回指定的属性值。                                              |
+| setAttribute()           | 把指定属性设置或修改为指定的值。                                |
+
+属性：
+
+innerHTML //元素节点的文本值
+
+parentNode//元素节点的父节点
+
+childNodes//元素节点的子节点
+
+atrributes//元素节点的属性节点
+
+nodeName属性规定节点的名称（只读）
+
+nodeValue规定节点的值
+
+nodeType属性返回节点的类型
+
+| 元素类型 | NodeType |
+|----------|----------|
+| 元素     | 1        |
+| 属性     | 2        |
+| 文本     | 3        |
+| 注释     | 8        |
+| 文档     | 9        |
+
+\>\>说一下自己的理解
+
+在这里，将html中的各个部分解析成节点的概念，有助于通过结点树建立节点关系模型，非常好，而且简单。
+
+然后，有将html中各个部分，定义成对象，并且定义了对象的属性和方法，能够很轻松的完成对元素的访问和操作。
+
+提到对象，联系C++中的知识，可以知道，对象，主要包括数据成员和成员函数，前者就是对象的属性，后者是对象的方法。
+
+然后再说一下这里的DOM的理解，文档对象模型。简单的说，就是讲整个html文档中的所有元素，定义成节点和对象的过程
+
+并且通过这种定义，简化并且系统的表达了对html的访问和操作。
+
+\>DOM中相关的事件
+
+.onclick=function(){displayDate()};
+
+onclick="displayDate()"
+
+onload="checkCookies()"
+
+onchange="upperCase()"
+
+onmouseover onmouseout
+
+onmousedown onmouseup
+
+\>DOM
+
+var x = document.getElementsByTagName("p")
+
+返回是节点数组
+
+x.length能返回数组的长度
--- a/JavaScript/教程/media/04d4031de63e53c5addd72792a6b60bd.png
+++ b/JavaScript/教程/media/04d4031de63e53c5addd72792a6b60bd.png
--- a/JavaScript/教程/media/0b65a5c473aad3b4addc35c7f1e79e89.png
+++ b/JavaScript/教程/media/0b65a5c473aad3b4addc35c7f1e79e89.png
--- a/JavaScript/教程/media/32ed381aeecf1527d86e15829f232641.png
+++ b/JavaScript/教程/media/32ed381aeecf1527d86e15829f232641.png
--- a/JavaScript/教程/media/41b23d86a383cc654da42e8957b33725.png
+++ b/JavaScript/教程/media/41b23d86a383cc654da42e8957b33725.png
--- a/JavaScript/教程/media/75813153285d5ceb04c812e98c3b33a1.png
+++ b/JavaScript/教程/media/75813153285d5ceb04c812e98c3b33a1.png
--- a/JavaScript/教程/media/a287b11ce3f0470882a238120c33a6bb.png
+++ b/JavaScript/教程/media/a287b11ce3f0470882a238120c33a6bb.png
--- a/JavaScript/教程/初识JavaScript.md
+++ b/JavaScript/教程/初识JavaScript.md
@@ -0,0 +1,162 @@
+**\>变量与数据类型**
+
+\>\>定义：JavaScript，是一种脚本语言（编程语言，用来控制软件应用程序，以文本（ASCIIS）形式保存，在需要时被调用进行解释或编译），广泛应用于客户端网页开发，现在服务端也有应用NODEJS。动态、弱类型、基于原型的语言。像大多数编程语言一样，有变量、类型、流程控制
+
+\>\>变量名称规则：字母下划线或美元符开头，大小写敏感，不允许使用js的关键字或者保留字作为文件名（作为解释性语言的一大优势就是不用考虑变量类型，提前分配孔家，编译过程中，分配空间就行）
+
+\>\>变量类型：整型，浮点型，字符型，字符串。
+
+\>\>变量定义：var 变量名；
+
+（感觉像是C的私生子，有些地方不是那么严格，更加灵活变通）
+
+**\>变量运算**
+
+\>\>自增自减运算
+
+\>\>简化运算。
+
+\>\>字符串之间可以直接进行加法运算，表示连接。
+
+\>\>字符串可以和其它类型的变量加法，表示转换成字符串类型，并连接。
+
+\>数组
+
+\>\>用于存放多个各种类型的数据，便于访问
+
+\>\>数组的定义：
+
+var arr = new array()//参数是数组长度
+
+var arr = [‘a'，'b','c'];//可以直接使用数组内的元素定义
+
+\>\>数组支持嵌套，多重数组（有点类似于存有多种数据的广义表）
+
+\>\>数组一定有length属性，arr.length等于键名中最大值加一。
+
+\>\>数组的长度可以直接在定义数组的时候给出
+
+\>\>数组的定义函数：参数可以是数组，也可以是变量初始化数组中的数据。
+
+\>\>数组的长度可以在任意时候添加，不会出现越界，这就是解释性语言的好处。
+
+**\>对象**
+
+\>\>定义：带有自己的属性和方法的数据类型。含有多个键值对。
+
+var o = {
+
+p:"hello"
+
+}
+
+var 变量声明，o 变量名称，p 键名（属性名）， hello 键值（属性值），
+冒号分隔。数据对象的大括号包含，最后加分号。当键名不符合标识符的条件时，必须加引号
+
+\>\>创建语句：
+
+var ogj1 = {};
+//大括号，只是声明了这是个对象，但不能说明这个对象属于哪一个类（类和类的对象的理念）
+
+var obj2 = new Object(); //相当于调用对象的构造函数，然后形成一个新的对象
+
+var obj3 = Object.create(null);//想当于调用一个已知对象的构造函数
+
+\>\>对象的引用,如果不同的变量指向同一个对象，他们都称作这个对象的引用，也就是说这些对象指向同一个内存地址，修改其中一个变量的属性，会影响到其他的变量。
+
+\>\>对象属性访的问方式： 对象名.对象的属性。objectName.propertyName //数据成员
+
+\>\>对象方法的访问方式：objectName.methodName(); //成员函数
+
+\>时间类的对象定义：
+
+var now = new Data(); //定义了一个时间对象now
+
+now.setTime（); // 设定时间
+
+now.getTime(); //得到完整的时间
+
+now.getFullYear(); //的到年份
+
+now.getMonth(); //得到月份
+
+now.getData(); //得到日期几号
+
+now.getHours(); //得到小时
+
+now.getMinutes(); //得到分钟
+
+now.getSeconds(); //得到秒
+
+now.getDay(); //星期
+
+\>string类的 对象的使用
+
+对象的定义：
+
+var mystr = “i like javascript”;
+
+var mystr = new String("some string");
+
+对象的访问：
+
+string.toUpperCase();
+
+string.toLowerCase();
+
+string.charAt(number); //返回指定的单个字符
+
+string.indexOf(substring, startpos); //在字符串中寻找子串
+
+string.split(separator, limit);
+//将字符串分割为字符串数组,separator是分割符，limit是分割次数
+
+string.substring(startpos,stoppos);
+//截取子串，参数分别是起止下标（终止与stop-1）
+
+string.substr(startpos, length);
+//截取指定长度的子串，参数分别是起始值、子串长度
+
+\>Math对象(本身就是一个对象而不是类)
+
+\>\>对象成员的使用
+
+Math.PI //圆周率
+
+Math.abs() //绝对值
+
+Math.ceil()/floor()/round() //分别是向上取整，向下取整，四舍五入。
+
+random(); //返回0到1之间的随机数（包含0不包含1）
+
+Math.min() / Math.max(); //返回指定数值中最低值
+
+\>数组类的对象使用
+
+\>\>数组对象的定义方法：
+
+var 数组名 = new Array();
+
+var 数组名 = new Array();
+
+var 数组名 = [元素1，元素2，元素3,,,,,]
+
+\>\>数组对象的使用
+
+数组名[下标] = 值
+
+\>\>数组对象的属性
+
+arr.length //数组的长度
+
+arr.concat(arr1, arr2,arr3.....)
+//链接多个数组,不改变数组对象arr，返回值是多个数组的连续
+
+arr.join(separator); //separator是指分割符。
+
+arr.reverse(); //倒序，arr被改变
+
+arr.slice(start, end);
+//返回子数组，不包含end，负数表示从末尾开始想前数，不修改原来的数组
+
+arr.sort(方法函数); //如果不指定函数，按Unicode编码的顺序排列
--- a/JavaScript/教程/对CSS的认识.md
+++ b/JavaScript/教程/对CSS的认识.md
@@ -0,0 +1,21 @@
+\>css的三种样式的定义方法
+
+\>\>标签选择：使用html标签，对html中所有标签起作用
+
+.\>\>器类别选择器：.类名，调用时：class = “类名”。
+
+\>\>ID选择器 \#id，调用时：id = “ID符号”
+
+\>选择器的分类及关系
+
+子代选择器：只能选择下一层的自带，使用\>来执行
+
+后代选择器：也称包含选择器，选择特定元素或元素组的后代，中间用空格&nbsp隔开
+
+伪类选择器：a：hover，a：link，a：visited，input：focus
+
+通用选择器：\*匹配所有的代码
+
+群组选择器：，使用逗号隔开，相同的样式属性的几个元素
+
+相邻同胞选择器：+表示与前者相邻的后者的格式
--- a/JavaScript/教程/浏览器对象.md
+++ b/JavaScript/教程/浏览器对象.md
@@ -0,0 +1,197 @@
+\>浏览器对象
+
+\>\>以浏览器为对象，调用浏览器对象的属性和方法。如：window.setinterval(clock,
+100) and widow.navigator，可以省略window。
+
+\>\>函数的参数是另外一个函数时，只写另外一个函数的名字（待定）。
+
+\>计时器
+
+\>\>分类：
+
+>   一次性计时器：尽在指定的延迟时间后触发一次行为
+
+>   间隔性触发计时器：每隔一定时间触发一次
+
+\>\>常用函数：
+
+>   setTimeout(代码行为， 延时时间)：制定的毫秒数后调用函数或计算表达式
+
+>   clearTinmeout(时间设定函数的ID)：取消有setTimeout()设置的timeout
+
+>   setIntervel(代码， 交互时间)：按照指定的周期来调用函数或计算表达式
+
+>   代码：要调用的函数或执行的代码串（行为）；交互时间：周期性执行行为的时间；返回值为函始时钟的id值。
+
+>   clearInterval(时间设定函数的ID)：取消由setIntervel()设置的timeout
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683)
+[copy](http://blog.csdn.net/estom_yin/article/details/51890683)
+
+1.  **\<span** style="font-size:18px;"**\>\<body\>**
+
+2.  **\<input** type="text" id="clock" size="50"**\>**
+
+3.  **\<script** type="text/javascript"**\>**
+
+4.  function clock(){
+
+5.  var time = new Date();
+
+6.  var attime = time.getHours() + ':' + time.getMinutes() + ':' +
+    time.getSeconds();
+
+7.  document.getElementById("clock").value = attime;
+
+8.  
+
+9.  }
+
+10. setInterval(clock, 100);
+
+11. **\</script\>**
+
+12. **\</body\>\</span\>**
+
+    //实现了简单的时间及时输出
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683)
+[copy](http://blog.csdn.net/estom_yin/article/details/51890683)
+
+1.  **\<span** style="font-size:18px;"**\>\<body\>**
+
+2.  **\<input** type="text" id="clock"**\>**
+
+3.  **\<input** type="button" id="istart" value="Start"**\>**
+
+4.  **\<input** type="button" id="istop" value="Stop"**\>**
+
+5.  **\<script** type="text/javascript"**\>**
+
+6.  var setid;
+
+7.  var time;
+
+8.  var attime;
+
+9.  function clock(){
+
+10. time = new Date();
+
+11. attime = time.getHours() + ":" + time.getMinutes() + ":" +
+    time.getSeconds();
+
+12. document.getElementById("clock").value = attime;
+
+13. }
+
+14. var istart = document.getElementById("istart");
+
+15. istart.onclick = function(){
+
+16. setid = setInterval(clock, 100);
+
+17. }
+
+18. var istop = document.getElementById("istop");
+
+19. istop.onclick = function(){
+
+20. clearInterval(setid);
+
+21. }
+
+22. **\</script\>**
+
+23. **\</body\>\</span\>**
+
+根据setIntervel返回的id值取消时钟的设置。
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683)
+[copy](http://blog.csdn.net/estom_yin/article/details/51890683)
+
+1.  **\<span** style="font-size:18px;"**\>\<body\>**
+
+2.  **\<input** type="text" id="inum"**\>**
+
+3.  **\<input** type="button" id="ialt" value="Start"**\>**
+
+4.  **\<script** type="text/javascript"**\>**
+
+5.  var inum = document.getElementById("inum");
+
+6.  var ialt = document.getElementById("ialt");
+
+7.  ialt.onclick = function () {
+
+8.  setTimeout("inum.value = 1", 1000);
+
+9.  setTimeout("inum.value = 2", 2000);
+
+10. setTimeout("inum.value = 3", 3000);
+
+11. setTimeout("inum.value = 4", 4000);
+
+12. setTimeout("alert('666')", 5000);
+
+13. }
+
+14. **\</script\>**
+
+15. **\</body\>\</span\>**
+
+    //实现了settimeout的函数的调用，注意，器低一个参数值可以是函数，也可以是普通行为，上述代码即为普通行为，需要加引号，而函数只需要写函数名，没有参数的话可以不加括号。
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51890683)
+[copy](http://blog.csdn.net/estom_yin/article/details/51890683)
+
+1.  **\<span** style="font-size:18px;"**\>\<body\>**
+
+2.  **\<input** type="text" id="count"**\>**
+
+3.  **\<input** type="button" id="istart" value="Start"**\>**
+
+4.  **\<input** type="button" id="istop" value="Stop"**\>**
+
+5.  **\<script** type="text/javascript"**\>**
+
+6.  var seti;
+
+7.  var num = 0;
+
+8.  function startCount(){
+
+9.  document.getElementById('count').value = num;
+
+10. num = num + 1;
+
+11. seti = setTimeout("startCount()", 1000);
+
+12. 
+
+13. }
+
+14. var istart = document.getElementById("istart");
+
+15. istart.onclick = function (){
+
+16. startCount();
+
+17. }
+
+18. var istop = document.getElementById("istop");
+
+19. istop.onclick = function(){
+
+20. clearTimeout(seti);
+
+21. }
+
+22. **\</script\>**
+
+23. **\</body\>\</span\>**
+
+    //实现了按秒计数器，可以开始和结束。
+
+    PS：有一个不明白的地方，在代码执行的时候，发现setIntervel（clock，1000）；setTimeout（“startCount()”,
+    1000）两个时间设定同样是调用两个函数，前者直接使用了函数名，而后者却有引号，函数名和括号。为什么？
--- a/JavaScript/教程/浏览器对象二.md
+++ b/JavaScript/教程/浏览器对象二.md
@@ -0,0 +1,39 @@
+\>location对象
+
+\>\>作用：用于获取或设置窗体的URL，并且可用于解析URL
+
+\>\>语法：location.[属性\|方法]
+
+\>\>对象属性：
+
+![713143941392.png](media/32ed381aeecf1527d86e15829f232641.png)
+
+\>\>对象方法：
+
+>   assign()：加载新的文档
+
+>   reload()：重新加载当前文档
+
+>   replace()：用心的文档替换当前的文档
+
+\>navigator对象
+
+\>\>作用：包含浏览器信息和操作系统版本
+
+\>\>对象属性
+
+![713145201241.png](media/0b65a5c473aad3b4addc35c7f1e79e89.png)
+
+\>screen对象
+
+\>\>作用：半酣了关于屏幕的信息，高度宽度、颜色深度
+
+\>\>属性：
+
+>   screen.height：返回屏幕分辨率的高
+
+>   screen.whidth：返回屏幕分辨率的宽
+
+>   screen.availWidth：屏幕的宽度
+
+>   screen.availHeight：屏幕宽度
--- a/JavaScript/教程/程序控制结构和函数.md
+++ b/JavaScript/教程/程序控制结构和函数.md
@@ -0,0 +1,61 @@
+\>程序控制结构简写
+
+\>\>if-else条件判断选择
+
+if（判断条件）{分支1}
+
+else {分支2}
+
+\>\>switch多项选择结构，注意关键字default、break；
+
+switch(选择变量){
+
+case 1:分支1;break;
+
+case 2:分支2;break;
+
+case 3:分支3break;
+
+default:分支4
+
+}
+
+\>\>for(初始化；循环条件；循环控制){
+
+循环体；
+
+}
+
+\>\>while(判断语句){循环体}
+
+\>\>关键字continue(退出本次循环开始新的循环)
+
+\>\>关键字break（退出整个循环）
+
+\>JS中的函数
+
+\>\>函数的定义：
+
+function fun(){函数体}
+
+\>\>函数调用
+
+函数名（实际参数）；
+
+\>\>参数传递
+
+可以传递任意数量的参数， 不用声明参数类型
+
+\>\>函数返回值
+
+可以返回任意类型的返回值。
+
+\>\>函数声明,是函数在任何地方都可以定义
+
+\>\>函数作用域，全局函数，对象的函数
+
+\>\>this：函数体中this说明当前函数方法的作用域。可以是全局作用域，可以是整个windows对象，可能用于指向函数外部的变量。
+
+\>\>call(this的指向， 变量)：可以改变当前函数中this的指向
+
+\>\>apply(this的指向，数组)：改变当前函数中this的指向
--- a/JavaScript/教程/网页交互事件.md
+++ b/JavaScript/教程/网页交互事件.md
@@ -0,0 +1,482 @@
+\>JS与HTML的关联
+
+**\>\>**内部关联：
+
+>   \<script type = "text/javascript"\>
+
+>   javascript 语言
+
+>   \</script\>
+
+**\>\>**位置：对页面初始化的JS必须放在开头。
+
+>   通过事件调用执行的JS对位置没有特殊要求
+
+**\>\>**外部关联：
+
+>   定义一个.js文件
+
+>   \<script src = "script.js"\>
+
+>   \</script\>
+
+\>JS与事件绑定
+
+**\>\>**间接绑定（函数名绑定）：元素.事件 = 函数名；
+
+>   将想要出发的行为写在一个函数里面，然后再将这个函数名赋值给元素的事件属性。
+
+>   在这里共提到三个名词：
+
+>   元素——指网页上的一个时间单位
+
+>   事件——指发生在元素身上的事（作为元素的一个属性）
+
+>   行为——指发生时间后带来的动作后果（写在了函数里）
+
+>   function func(){}
+
+>   btn.onclick = func;
+
+**\>\>**直接绑定（匿名函数绑定）：元素.事件 = function（）{函数体}
+
+>   将想要出发的行为，直接作为事件的函数。
+
+>   btn.onclick = function(){}；
+
+**\>\>**前者适合单一行为的绑定，后者适合多行为绑定和带参数函数行为的绑定。
+
+\>JS对网页的操作
+
+**\>\>**document.write()//直接向HTML中写内容
+
+**\>\>**alert（字符串变量）//弹窗，在点击“确定”按钮前不能进行其他任何操作。通常用于调试程序。
+
+**\>\>**doucument.getElementById("id_value")//通过id获取元素（具有唯一性）,id_value为id属性的值
+
+>   简单说，就是通过函数获取某个元素的id赋值给JS自身的变量，然后对这个id的变量进行操作，就相当于对HTML标签进行操作。
+
+**\>\>**doucument.getElementsByTagName(TagName)//返回带有制定标签名的元素对象的集合（一个数组）。返回元素的顺序，使他们在文档中出现的顺序。TagName,是HTML标签。
+
+**\>\>**id.innerHTML 或 TagName.innerName//可以返回显示标签内部的内容。
+
+**\>\>**id.value 或 TagName.value//访问input的标签的值
+
+\>鼠标事件
+
+**\>\>**元素.onclick = 函数名；鼠标单击事件，某个元素的onclick属性。
+
+**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  **\<span** style="font-size:18px;"**\>\<body\>**
+
+2.  **\<p** id="pid"**\>**JavaScript**\</p\>**
+
+3.  **\<button** id="btn"**\>**click**\</button\>**
+
+4.  **\<script** type="text/javascript"**\>**
+
+5.  var btn = document.getElementById("btn");
+
+6.  btn.onclick = hello;
+
+7.  function hello(){
+
+8.  var pid = document.getElementById("pid");
+
+9.  pid.innerHTML = "Hello!";
+
+10. }
+
+11. **\</script\>**
+
+12. **\</body\>\</span\>**
+
+    //有一个botton对象，id为btn，这是元素
+
+    //修改btn.onclick属性为函数hello，这是触发事件与行为的联系。
+
+    //函数hello执行的时候将id为pid的标签内容修改，这是行为
+
+**\>\>**鼠标动作
+
+>   onclick 鼠标点击
+
+>   onmousedown 鼠标按下
+
+>   onmouseup 鼠标松开
+
+>   onmouseover 鼠标悬停
+
+>   onmouseout 鼠标离开
+
+>   onmouseup & onmousedown
+
+**[python]** [view
+plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  \<span style="font-size:18px;"\>\<body\>
+
+2.  \<p id="pid"\>JavaScript\</p\>
+
+3.  \<button id="btn"\>click\</button\>
+
+4.  \<script type="text/javascript"\>
+
+5.  var btn = document.getElementById("btn");
+
+6.  btn.onmousedown = down;
+
+7.  btn.onmouseup = up;
+
+8.  function up() {
+
+9.  var pid = document.getElementById("pid");
+
+10. pid.innerHTML = "up";
+
+11. }
+
+12. function down() {
+
+13. var pid = document.getElementById("pid");
+
+14. pid.innerHTML = "down";
+
+15. }
+
+16. \</script\>
+
+17. \</body\>\</span\>
+
+>   onmouseover & onmouseout
+
+**[python]** [view
+plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  \<span style="font-size:18px;"\>\<body\>
+
+2.  \<p id="pid"\>JavaScript\</p\>
+
+3.  \<button id="btn"\>click\</button\>
+
+4.  \<script type="text/javascript"\>
+
+5.  var btn = document.getElementById("btn");
+
+6.  btn.onmouseover = over;
+
+7.  btn.onmouseout = out;
+
+8.  function over() {
+
+9.  var pid = document.getElementById("pid");
+
+10. pid.innerHTML = "over";
+
+11. }
+
+12. function out() {
+
+13. var pid = document.getElementById("pid");
+
+14. pid.innerHTML = "out";
+
+15. }
+
+16. \</script\>
+
+17. \</body\>\</span\>
+
+\>文本框事件
+
+>   onfocus 输入框聚焦
+
+>   onblur 输入框模糊
+
+**[python]** [view
+plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  \<span style="font-size:18px;"\>\<body\>
+
+2.  \<p id="pid"\>JavaScript\</p\>
+
+3.  \<input id="input"\>
+
+4.  \<script type="text/javascript"\>
+
+5.  var inp = document.getElementById("input");
+
+6.  inp.onfocus = focus;
+
+7.  inp.onblur = blur;
+
+8.  function focus() {
+
+9.  var pid = document.getElementById("pid");
+
+10. pid.innerHTML = "focus";
+
+11. }
+
+12. function blur() {
+
+13. var pid = document.getElementById("pid");
+
+14. pid.innerHTML = "blur";
+
+15. }
+
+16. \</script\>
+
+17. \</body\>\</span\>
+
+    onselect文本框被选中
+
+    onchange 改变文本框的内容出发事件
+
+**[python]** [view
+plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  \<span style="font-size:18px;"\>\<body\>
+
+2.  \<p id="pid"\>JavaScript\</p\>
+
+3.  \<input id="input" value="change me\~"\>
+
+4.  \<script type="text/javascript"\>
+
+5.  var inp = document.getElementById("input");
+
+6.  inp.onselect = select;
+
+7.  inp.onchange = change;
+
+8.  function select() {
+
+9.  var pid = document.getElementById("pid");
+
+10. pid.innerHTML = "select";
+
+11. }
+
+12. function change() {
+
+13. var pid = document.getElementById("pid");
+
+14. pid.innerHTML = "change";
+
+15. }
+
+16. \</script\>
+
+17. \</body\>\</span\>
+
+**\>\>**确认框
+
+>   语法：confirm（str）
+
+**[python]** [view
+plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  \<span style="font-size:18px;"\>\<body\>
+
+2.  \<input id="input" type="button" value="点击我"\>
+
+3.  \<script type="text/javascript"\>
+
+4.  function rec(){
+
+5.  var message = confirm("Do you like me?");
+
+6.  **if**(message == true)
+
+7.  {
+
+8.  document.write("么么哒！\~");
+
+9.  }
+
+10. **else**
+
+11. {
+
+12. document.write("泥奏凯！");
+
+13. }
+
+14. }
+
+15. var inp = document.getElementById("input");
+
+16. inp.onclick = rec;
+
+17. \</script\>
+
+18. \</body\>\</span\>
+
+**\>\>**提问框
+
+>   语法：prompt(str1,str2)
+
+>   说明：str1显示在消息对话框中不可修改；str2显示在文本框中的默认内容可修改
+
+>   返回值：确定-\>返回文本框中输入的内容；取消-\>返回null
+
+**[python]** [view
+plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  \<span style="font-size:18px;"\>\<body\>
+
+2.  \<input id="input" type="button" value="点击我"\>
+
+3.  \<script type="text/javascript"\>
+
+4.  function rec(){
+
+5.  var score; // score变量，用来存储用户输入的成绩值。
+
+6.  score = prompt("Your score?");
+
+7.  **if**(score \>= 90)
+
+8.  {
+
+9.  document.write("你很棒！");
+
+10. }
+
+11. **else** **if**(score \>= 75)
+
+12. {
+
+13. document.write("不错哦！");
+
+14. }
+
+15. **else** **if**(score \>= 60)
+
+16. {
+
+17. document.write("要加油！");
+
+18. }
+
+19. **else**
+
+20. {
+
+21. document.write("要努力了哦！");
+
+22. }
+
+23. }
+
+24. var inp = document.getElementById("input");
+
+25. inp.onclick = rec;
+
+26. \</script\>
+
+27. \</body\>\</span\>
+
+\>网页的属性设置
+
+**\>\>**element.getAttribute(name)//element是待设定元素对象id或者标签名，name是属性的名字。
+
+**\>\>**element.setAttribute(name,value)//element是id或者标签的名字（待设定元素对象），name是属性名，value是新的属性值
+
+**[python]** [view
+plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  \<span style="font-size:18px;"\>\<body\>
+
+2.  \<p id="pid" title="JavaScript"\>JavaScript\</p\>
+
+3.  \<button id="btn"\>click\</button\>
+
+4.  \<script type="text/javascript"\>
+
+5.  var btn = document.getElementById("btn");
+
+6.  btn.onclick = attr;
+
+7.  function attr() {
+
+8.  var pid = document.getElementById("pid");
+
+9.  alert(pid.getAttribute("id"));
+
+10. alert(pid.getAttribute("title"));
+
+11. pid.setAttribute("title", "hello");
+
+12. alert(pid.getAttribute("title"));
+
+13. }
+
+14. \</script\>
+
+15. \</body\>\</span\>
+
+**\>\>**window.open(URL,\<窗口方式\>，\<参数字符串\>)//URL打开的网址路径，打开方式可以是"_top",
+"_blank", "_self"。
+
+**[python]** [view
+plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  \<span style="font-size:18px;"\>\<body\>
+
+2.  \<input id="input" type="button" value="点击我，打开新窗口！"\>
+
+3.  \<script type="text/javascript"\>
+
+4.  function windowOpen(){
+
+5.  window.open('http://www.jisuanke.com', '_blank', 'width = 600, height = 400,
+    top = 100, left = 0');
+
+6.  }
+
+7.  var inp = document.getElementById("input");
+
+8.  inp.onclick = windowOpen;
+
+9.  \</script\>
+
+10. \</body\>\</span\>
+
+**\>\>**windows.onload 当页面加载或者刷新时会出现相应的函数。
+
+**[python]** [view
+plain](http://blog.csdn.net/estom_yin/article/details/51888110)
+[copy](http://blog.csdn.net/estom_yin/article/details/51888110)
+
+1.  \<span style="font-size:18px;"\>\<head\>
+
+2.  \<meta charset="UTF-8"\>
+
+3.  \<title\>load\</title\>
+
+4.  \<script type="text/javascript"\>
+
+5.  window.onload = load;
+
+6.  function load() {
+
+7.  alert("load");
+
+8.  }
+
+9.  \</script\>
+
+10. \</head\>\</span\>