zoukankan      html  css  js  c++  java
  • 4、JavaScript

    一、JavaScript的概念:是基于对象和事件的脚本语言

      1、特点:

        a)、安全性。

        b)、跨平台性(只要可以解释JS的浏览器就可以执行,和平台无关)  

      2、JavaScript与Java的区别:

        a)、JS是NetScape公司产品,Java是Oracle公司
        b)、JS是基于对象,Java是面向对象
        c)、JS只需解释就可以执行,Java需要先编译成字节码文件再执行
        d)、JS是弱类型,Java是强类型

      3、JavaScript与HTML的结合:

        a)、JS代码存放在标签<script>...</script>
        b)、使用script标签的src属性引入一个js文件(<script type="text/javascript" src="JS文件"></script>)

      4、<script>的存放位置:

        a)、HTML文件的<head>标签中

        b)、HTML文件中<body>标签中

    二、JavaScript语法:

      1、变量通过关键字var来定义,弱类型不需要指定具体的数据类型(注意:JS中特殊常量值undefined,当变量没有初始化就被使用,该变量的的值就是undefined)
            var v;
            v = v + 5;
            alert(v);// 结果是NaN
      2、语句(与Java语句格式相同):逻辑运算符:&& ||
        if语句:
              注意:var x = 3;
                if(x==4)//可以进行比较运算
                if(x=4)//可以进行赋值运算,而且同样可以进行判断
                原因:在JS中0可以表示false,非0可以表示true(通常用1表示),因此if(x=4)结果为true   。非null为true,null为false
        switch语句:switch(x),其中x可以接收字符串
        循环语句(whiledo...whilefor)
        for(变量 in 对象){...}
      3、函数:
        一般函数:格式:function 函数名(形式参数...){...}
          注意:调用有参数的函数时,但没有给其传值,函数一样可以运行,或者调用没有参数的函数并给其传值,该函数一样可以运行。
             在函数中有一个参数数组对象(arguments),该对象将传递的参数都封装在一个数组中
             在函数中定义变量时没有使用var关键字,那么执行该函数后,此变量就成为一个全局变量
             函数在调用时的写法:
             var s = method();// s变量接收method函数的返回值
             var s = method;// s和method代表同一个函数,那么该函数也可以通过s()的方式调用
        匿名函数:格式:function(){...}  (或者说是直接将函数作为参数直接传递,不进行封装)
               例:var demo = function(){...}
               调用:demo();
      4、数组
        特点:长度是可变的,可以存任意元素(数组里存放的元素类型可以不同)
        定义格式:var arr = new Array();
             arr[0] = "hello";
             arr[1] = 1;
             arr[2] = true;

             输出:var arr = ["123", 23, true];

     三、JavaScript语句示例:

      1、在<head>标签中编写:

     1 <!-- 鼠标单击显示按钮后弹出提示对话框,提示内容为:JavaScript示例 -->
     2 <html>
     3   <head>
     4     <title>JavaScript示例</title>
     5     <script type="text/javascript">
     6        function test(){
     7           alert("JavaScript示例");
     8        }  
     9     </script>
    10   </head>
    11   
    12   <body>
    13     <input type="button" value="显示" onclick="test()">
    14   </body>
    15 </html>

      2、外部 .js 文件中编写

        a)、创建一个  .js 文件:如文件名为  testJavaScript.js 类容为:

    function test(){
       alert("JavaScript示例");
    }

        b)、在<head>标签中利用<script>标签引入 testJavaScript.js文件,便可以达到与上例相同的结果。

     1 Transitional//EN">
     2 <!-- 鼠标单击显示按钮后弹出提示对话框,提示内容为:JavaScript示例 -->
     3 <html>
     4   <head>
     5     <title>JavaScript示例</title>
     6     <script type="text/javascript"  src="testJavaScript.js"></script> 
     7   </head>
     8   
     9   <body>
    10     <input type="button" value="显示" onclick="test()">
    11   </body>
    12 </html>

    四、DOM(document object model):文档对象模型

      1、DHTML:是多个技术的综合体,称为动态HTML
        HTML:将数据进行封装
        CSS:负责标签中数据的样式
        DOM:将标签封装成对象
        JS:将以上三者进行融合,通过程序来操作这些对象,完成动态效果

      2、节点:根据 DOM,HTML 文档中的每个成分都是一个节点。

             DOM 是这样规定的:

        • 整个文档是一个文档节点 
        • 每个 HTML 标签是一个元素节点 
        • 包含在 HTML 元素中的文本是文本节点 
        • 每一个 HTML 属性是一个属性节点 
        • 注释属于注释节点 

        父级节点:parentNode
        子节点:childNodes
        兄弟节点:
          上一个兄弟节点:previousSibling
          下一个兄弟节点:nextSibling

    五、JavaScript中的常见对象中

      1、Document对象:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>Document节点</title>
        <script type="text/javascript">
           function test(){        
               /* 将String类型的数据强转为number型 
                  document.getElementsById返回的是一个具体的对象
               */
               var sum= Number(document.getElementById("data1").value); 
                   sum+= Number(document.getElementById("data2").value);
              alert(sum);
           }
           function test1(){        
               /* 将String类型的数据强转为number型 
                 document.getElementsByName返回的是一个数组对象  
               */
               var sum = document.getElementsByName("data1")[0].value; 
                    sum -= document.getElementsByName("data2")[0].value; 
              alert(sum);
           }
        </script>
      </head>
      
      <body>
         数值一:<input type="text"  id="data1" name ="data1" value="1"/>
         数值二:<input type="text"  id="data2" name ="data2" value="1"/>
         <input type="button" onclick="test()" value="计算加" />
         <input type="button" onclick="test1()" value="计算减" />
      </body>
    </html>
    close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。
    getElementById() 返回对拥有指定 id 的第一个对象的引用。
    getElementsByName() 返回带有指定名称的对象集合。
    getElementsByTagName() 返回带有指定标签名的对象集合。
    open() 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。

      2、Date对象:

    Date() 返回当日的日期和时间。
    getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
    getMonth() 从 Date 对象返回月份 (0 ~ 11)。
    getFullYear() 从 Date 对象以四位数字返回年份。
    getYear() 请使用 getFullYear() 方法代替。
    getHours() 返回 Date 对象的小时 (0 ~ 23)。
    getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
    getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
    getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
    1 function test(){
    2     var da = new Date();  /*返回当前日期和时间*/
    3     alert(da.getDate());   /*返回一个月中的某天*/
    4     alert(da.getDay());    /*返回一周中的某天*/
    5     alert(da.getHours());  /*返回对象的小时数*/
    6 };
  • 相关阅读:
    VysorPro助手
    Play 2D games on Pixel running Android Nougat (N7.1.2) with Daydream View VR headset
    Play 2D games on Nexus 6P running Android N7.1.1 with Daydream View VR headset
    Native SBS for Android
    ADB和Fastboot最新版的谷歌官方下载链接
    How do I install Daydream on my phone?
    Daydream Controller手柄数据的解析
    蓝牙BLE传输性能及延迟分析
    VR(虚拟现实)开发资源汇总
    Android(Java)控制GPIO的方法及耗时分析
  • 原文地址:https://www.cnblogs.com/czj-zhm/p/5839998.html
Copyright © 2011-2022 走看看