Day03-JavaScript高级编程

标签： HTML基础

---

01复合类型对象

1. 内置对象
2. 自定义对象
   在js函数当中可以在定义函数
3. 浏览器对象（重点）BOM,woindows,document
4. 数组
   

数组是一群元素的集合，初始化大小不会影响数组的实际长度。
数组里面可以存储复合类型

函数 就是一片功能代码快。

02 BOM编程 （用来操作浏览器）

就是浏览器对象模型
作用1.就只操作主流浏览器的各个组成部分。

03 Windows对象

浏览器一遇到``或 `frameset`

属性status ， opener
方法 setTimeOut setInterval
事件 event 浏览器加载时自动创建
鼠标事件onmousemove onmouseout
焦点事件，
键盘事件 onkeyup
表单： 阻塞是提交 onsubmit， 用来验证表单的内容

动态事件，就是动态的给标签添加事件，不直接在标签上面的直接添加事件函数、
问题：
常用对象

location对象
Screen 用户的屏幕信息
doucment 文档对象
history 浏览器历史 go(0)方法，刷新

　04 DOM文档对象模型 (用来操作网页的文档）

• D 表示 HTML/JSP/XML,
• O 表示对象，以对象的方式访问web页面中的元素
• M 模型是一种规则，在DOM看来，所有的文档，加载到内存以后都是一个倒状树。

节点

• 由结构图中我们可以看到，整个文档就是一个文档节点 document
• 而每一个HMTL标签都是一个元素节点(divElement)
• 标签中的文字则是文本节点(divTextElement)
• 标签的属性是属性节点(idAttributeElement)

• 一切都是节点……

  • 查找元素的节点 getElementById() ,此方法只是用于 document对象
  • getElementsByNam() 寻找有着给点name属性的所有元素，返回的是一个节点集合
  • getElementByTagName()寻找给定标签名字的所有元素。因此放回 一个节点集合 该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
  • 元素属性
  • getAttribute() 返回一个给定元素指定属性的值var nodValue = document.getElementsByTagName("input")[0].getAttribute("type");
  • setAttribute(attributeName,attributeValue) 如果这个属性已经存在，它的值将被替代
  • getAttributeNode() 通过属性获得属性节点
  • removeAttribute() 删除指定熟悉的节点

05 DOM属性 –

• nodeName 其内容是是给点节点的名称，只读属性
• nodeType 返回一个整数，代表节点的类型，1代表元素节点，2代表属性节点，3代表文本节点。只读属性
• nodeValue 返回给定当前节点的当前值，如果是文本节点返回的是文本值，如果是属性节点，返回的是属性值，如果是元素节点返回的是NULL,该属性可读写，但是不能给属性设置值，但是可以给
• replaceChild() 替换节点

总结： javascript就是用来操作网页的一种语法。
其中出现了bom来操作整个浏览器窗体，衍生出许多的对象。
因为网页是文本的形式出现，所以出现了操作DOM的文本模型来处理标签里面的内容，我们把这些这些标签组成的网页想成一个文本树，数和数之间就有了节点， 因此JavaScript有了许多获得节点的方法，由于节点的不同会有标签节点，文本，属性节点。 大多数可以查询Api可以查询到。、

最后的作业 验证用户的输入是否正确
当用户提交表单后，对表单中的所有选项进行验证，全部通过后，方可提交
1用户名必填且英文或中文
2密码必填且8位数字

script type="text/javascript">
             //1.定位到表單的位置，
             //2.設置那個柱塞方法
            var fromArray = document.forms;
            fromArray[0].onsubmit = function() {
                //验证
                var userName = document.getElementById("user_ID").value;
                if ((/[a-zA-Z]{8,}/.test(userName)) || (/[\u4e00-\u9fa5]{8,}/.test(userName))) {
                    //用户名输入正
                    var password = document.getElementById("pasw_ID").value;
                    if (/[0-9]{8,}/.test(password)) {
                        //密码验证正确
                        alert("注册成功")
                        return true;
                    } else {
                        alert("密码错误")
                    }
                } else {
                    alert("用户名必须为英文")
                }
                return false;
            }
        </script>