JavaScript


    是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。

脚本语言(不需要编译)
    1.JS脚本语言 解释执行器(脚本引擎):浏览器
    2.与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些。
        JS弱类型语言, 没有明确的数据类型,也就是说,在声明变量时,不需要指定变量的类型,变量的类型由赋给变量的值决定。 
                    var number=1; var number="123";
        Java,C++等是强类型语言
                    int number=1;
    3.脚本语言介于HTML和C,C++,Java,C#等编程语言之间
    4.脚本语言是一种解释性语言,它不像c\c++等可以编译成二进制代码,以可执行文件的形式存在。                

JS三大核心:


    ECMASctipt    解释器,充当翻译角色,JS的核心部分.
    DOM         文档对象模型, DOM 赋予了 JS 操作 HTML 的能力,即 document 操作。
    BOM         浏览器对象模型, BOM 赋予了 JS 操作浏览器的能力,即 window 操作。

JavaScript中,提供常用基本数据类型

undefined(未定义类型)
null(空类型)
            ECMAScript把undefined和null定义为相等的,即undefined == null 返回true,但它们的含义不同.
boolean(布尔类型)
number(数值类型)
string(字符串类型)
 

JSON


        JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
        JSON 是轻量级的文本数据交换格式
        JSON 是存储和交换文本信息的语法。类似 XML。
        JSON 比 XML 更小、更快,更易解析。
        JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。
        JSON 解析器和 JSON 库支持许多不同的编程语言。 
        JSON 具有自我描述性,更易理解
        JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
        由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,
        用 JSON 数据来生成原生的 JavaScript 对象。

JS对象
    var car = {
             brand:"audi",
             color:"red",
             price:50000
         };
JSON数据
    var car = {
            "brand":"audi",
            "color":"red",
            "speed":300
        };
    
    eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。
            必须把文本包围在括号中
            var txt='{"user":['+
                    '{"account":"admin","pwd":"admin"},'+
                    '{"account":"user","pwd":"user"}]}';
            var obj = eval("("+ txt +")");


HTML DOM (文档对象模型)


            当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
            通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
            JavaScript 能够改变页面中的所有 HTML 元素
            JavaScript 能够改变页面中的所有 HTML 属性
            JavaScript 能够改变页面中的所有 CSS 样式
            JavaScript 能够对页面中的所有事件做出反应
            
    1.getElementByID() 方法
            返回有着给定id属性值的元素节点对应的对象。

    2.getElementsByTagName() 方法
            返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。

    3.getElementsByClassName() 方法
            HTML5 DOM中新增的一个方法。这个方法让我们能通过class属性中的类名来访问元素。

    4.getElementsByName() 方法
            查询元素的 name 属性。方法返回的是元素的数组。
            
    5.改变标签中文本内容:    innerText
        document.getElementById("header").innerText = "标题二";
        
    6.改变HTML代码:        innerHTML
        document.getElementById("p1").innerHTML = "<strong>Hello Hadoop</strong>"
    
    7.改变CSS样式
        document.getElementById(id).style.property=新样式
        //隐藏和显示文本(hidden visiable)
       function show(){
               var element = document.getElementById("text");
               var state = element.style.visibility;        //visibility获取元素状态,隐藏or显示
               if(state=="hidden"){
                   element.style.visibility="visible";
                   document.getElementsByClassName("btn")[0].innerText = "隐藏文本";
               }else {
                   element.style.visibility="hidden";
                   document.getElementsByClassName("btn")[0].innerText = "显示文本";
               }
       }
       
    8.获取属性值:        getAttribute("属性")

    9.修改属性节点的值:    setAttribute(attribute,value)
    
    10.动态创建元素:
        创建一个元素节点:
            createElement():     按照给定的标签名创建一个新的元素节点.
        创建一个文本节点:
            createTextNode():     创建一个包含着给定文本的新文本节点. 
        为元素节点添加子节点:
            appendChild():         在调用该方法的元素最后添加子节点.
                element.appendChild(newChild): 
                    给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
        插入节点:
            insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
                  element.insertBefore(newNode,targetNode);
                     节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面            
                     节点 targetNode 必须是 element 元素的一个子节点。
        删除节点:
            removeChild():    从一个给定元素里删除一个子节点
                var reference = element.removeChild(node);
        获取父节点:
            parentNode
       
    12.JS表单验证
        用法:
            var reg = /正则表达式/;
            reg.test(str); //验证是否匹配正则
                 常用正则:
             var pattern_user  = /^[a-zA-Z]{1}[a-zA-Z0-9]{5,19}$/;                        //验证用户名
             var pattern_pwd   = /^[a-zA-Z0-9]{6,20}$/;                                        //验证密码
             var pattern_email = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;     //验证邮箱
             var pattern_phone = /^[1-9]\d{10}$/;                                                 //验证手机号


        js校验表单后提交表单的三种方法:
            (1).<form action="login" method="post" onsubmit="return check(this)">
            (2).<input type=submit name="submit1" value="注册" onclick="return check(this.form)">
            (3).<input type=button name="submit1" value="登陆" onclick="check(this.form)">
              其中,(2),(3)需要在方法中手动提交: form.submit();

HTML BOM (浏览器对象模型)  


    window对象的常用方法如下  
        prompt      显示可提示用户输入的对话框
        alert          显示带有一个提示信息和一个确定按钮的警示框 
        confirm     显示一个带有提示信息、确定和取消按钮的对话框 
        close        关闭浏览器窗口
        open        打开一个新的浏览器窗口,加载给定 URL 所指定的文档
                                    window.open("弹出窗口的URL","窗口名称","窗口特征");
        setTimeout    在指定的毫秒数后调用函数或计算表达式
        setInterval     按照指定的周期(以毫秒计)来调用函数或表达式
    
    window对象常用事件:
        onload                一个页面或一幅图像完成加载
        onlick                 当用户单击某个对象时调用的事件句柄
        onkeydowm       某个键盘按键被 按下
        onchange          域的内容被改变
        onmouseover    鼠标移到某元素之上 
        onmouseout      鼠标移出事件(拿走)

  

posted on 2018-08-24 16:46  七宝嘤嘤怪  阅读(149)  评论(0编辑  收藏  举报