• JavaScript总结(一)


    一、JavaScript 简介

      1.1 、什么是 JavaScript?


            JavaScript 的简称:JS。

            JavaScript 是一个脚本。(不需要经过编译器编译的语言就叫做脚本)

            JavaScript 的作用:
                1)动态改变网页内容
                2)动态改变网页的外观
                3)验证表单数据
                4)响应事件

       1.2、 JavaScript 的特点

            1)语法简单,易学易用。
            2)解释型语言。
            3)动态执行。
            4)跨平台,JavaScript是依赖于浏览器本身的,与操作系统无关。
            5)基于对象和事件驱动(单击、悬浮、双击、聚焦、失焦...)
            6)仅限客户端。
         直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标,移动窗口,选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。 

        1.3、 JavaScript 与 Java 的区别?

            1)Java 需要编译。JavaScript 需要解释。
            2)Java 彻底的面向对象
            3)Java 是强类型(数据要特别指定类型来存储)。
               JavaScript 是弱类型(会根据给定的数据来推算出类型)。

    二、 引入方式与引入位置

      向HTML页面插入JavaScript的主要方法,就是使用<script元素>。

      使用<script>元素的方式有两种:直接在HTML页面中嵌入JavaScript代码包含外部的JavaScript文件

    1. JS代码存放在标签对<script>...</script>中。
    2. 使用script标签的src属性引入一个js文件。(方便后期维护,扩展)

        例:<script src=”test.js” type=”text/javascript”></script>

          注:规范中script标签中必须加入type属性。

    内部

    <html >
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>在HTML中使用JavaScript</title>
        </head>
        <body>
            <h1>在页面中嵌入JavaScript</h1>
            <script type="text/javascript">
                window.document.write("hello,world");
            </script>
        </body>
    </html>

    外部

    html文件使用src引入外部my.js

    JavaScript文件

    JavaScript代码

    <script>标签的位置

    关于<script>标签的位置,<script>一般应该放在页面的<head>元素中。

    <html >
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>在HTML中使用JavaScript</title>
            <script type="text/javascript" >
                window.document.write("世界你好!!!");
            </script>
        </head>
        <body>
            <h1>将JavaScrip标签放在head上</h1>
        </body>
    </html>

    注意:

      1、 页面上可以有多个<script>标签

      2、 <script>标签按顺序执行

      3、 <script>标签可以出现在任意的页面位置

          4、<script>标签一定要写</script>关闭,而不能<script/>这样关闭。否则没有任何错误信息,但是没有运行结果。

    三、区分大小写

       JavaScript区分大小写

    四、常用函数

      window.alert() 或写为 alert() :显示一个提示框显示内容。

      window.document.write() :在网页的当前位置处写内容。

     五、变量

    JavaScript的变量是弱类型的,定义变量时只用 var 运算符,可以将它初始化为任意值。

       //所有的数据都是用var定义
             var name = "admin";  
             var age = 26;
             var obj = new Date();

     六、数据类型

       使用typeof关键字查看变量代表的具体数据类型

        var name = "admin";
             var age = 26;
             var obj = new Date();

             alert(typeof(name)+"=="+typeof(age)+"=="+typeof(obj));

     弹出:string==number==Object

    有4种基本数据类型:

        Undefined, Boolean,Number和String

    • undefined - 如果一个变量没有初始化值的时候,其类型为undefined类型。表示没有定义
    • boolean -布尔是boolean类型
    • number - 所有的数值都是number类型
    • string -字符和字符串都是string类型
    • object - 如果变量是一种引用类型或 Null 类型的
    <script type="text/javascript" >
                var a = 100;
                var b = 3.14;
                var c = true;
                var d = 'a';
                var e = "hello";
                var f;
                document.write(a + "<br/>");  //100
                document.write(b + "<br/>");  //3.14
                document.write(c + "<br/>");  //true
                document.write(d + "<br/>");  //a
                document.write(e + "<br/>");  //hello
                document.write(f + "<br/>");  //undefined
                document.write("<hr/>");
                document.write( typeof a + "<br/>");    //number
                document.write( typeof b + "<br/>");  //number
                document.write( typeof c + "<br/>");  //boolean
                document.write( typeof d + "<br/>");  //string
                document.write( typeof e + "<br/>");  //string
                document.write( typeof f + "<br/>");    //undefined
        </script>

    七、类型转换

    <script type="text/javascript">
         var a = 20;
         var b = 14;
         var c = a + b;
         var d = a + "" + b;
         alert(c);      //输出  34
         alert(d);    //输出  2014
         
         var x = "20";
         var y = "12";
         var xy =  x + y;
         alert(xy);    //输出  2012
         var xy2 = parseInt(x) + parseInt(y);
         window.document.write(xy2);   //输出   32    parseInt将字符串解析为数字
      </script>

        ECMAScript 提供了两种把非数字的原始值转换成数字的方法,即 parseInt() 和 parseFloat()。只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN。

        在判断字符串是否是数字值前,parseInt() 和 parseFloat() 都会仔细分析该字符串。

        parseInt() 方法首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parseInt() 将把该字符之前的字符串转换成数字。

        例如,如果要把字符串 "12345red" 转换成整数,那么 parseInt() 将返回 12345,因为当它检查到字符 r 时,就会停止检测过程。

    <script type="text/javascript">
    /*
        字符串转数字
            parseInt()  可以把一个字符串转换成整数。
            parseFloat() 可以把一个字符串转换成小数。
    */
        var a = "12";
        a = 12.64;
        
        a = "123abc123"; /* parseInt方法如果接收的字符串含有非数字的字符,那么parseInt方法会从字符串的首个字符开始寻找,一直找到非数字字符为止,然后就使用前面的数字字符转换成数字, */
        a = "a123";  // NaN not a number(不是一个数字)
        
        a = "012"; /* 12 如果首位是0,那么就想祛除0再进行转换。*/
    
        a = "0x10"; /* 如果一个字符串是以0x开头,那么会把字符串中的内容当成十六进行的数据处理的。 */
        var b = parseInt(a);
        document.write("结果:"+b+"<br/>");    //16
           
        var c= "3.14";
        c = "10";   // 如果是一个字符串是整数的,那么使用parseFloat还是转换 成整数 。
        c = "100a";
        c = "abc123";
        c = parseFloat(c);
        document.write("结果:"+c+"<br/>");   //NaN
        
    /*
         javascript提供一个IsNaN的方法让我们判断该字符串是否是 一个数字。
        
          is not a muber  不是一个数字。
          
          不是一个数字返回true,是一个数字返回false.
    */
        
        document.write(isNaN("123")+"<br/>"); //false
    
        document.write(isNaN("abc123"));    //true
    
        
    </script>

     八、比较运算符

    <script type="text/javascript">
         var a = 20;
         var b = "20";
         // 如果用==判断是否相等,JS会尽力把它们搞成同一个类型,然后进行比较
         console.log( a == b );   //true   "==" 只是比较数值是否相等
         console.log( a === b );  //false  "==="比较数值和类型是否相等
         console.log( a != b );   //false   "!=" 比较数值是否不等
         console.log( a !== b );  //true   "!=="比较类型和数值是否不等
     
      </script>

    三目运算

    三目运算符    
    
        布尔表达式?值1:值2;
    */        
    
        var age = 10;
        
        document.write(age>18?"成年人":"未成年人"); //未成年人    //表达式?返回值1:返回值2     如果表达式成立则返回返回值1;如果表达式不成立,则返回返回值2

    九、流程控制语句

    <script type="text/javascript">
    /*
    控制流程语句
    
        if语句
        
        格式:
            if(判断条件){
                符合条件执行的代码    
            }    
        
        if语句的特殊之处: 
            1. 在javascript中的if语句条件不单止可以写布尔表达式,还可以写任何的数据。
            
            number  非0为true, 0为false.
            string  内容不为空是true, 内容空的时候是false。
            undefined:false
            NaN:    false 
    */       
        var workAge = 1;    //为0是false;非0是true
        var str ="";        //为空是false;不为空是true
        var b;        //未定义,为false
        if(workAge){
            document.write("明天过来面试!!");
        }else{
            document.write("不要在投我们公司了,不要你!");    
        }
        
    /*
    选择语句: 
        switch语句
        
            switch(变量){
                case 值1:&nbsp;
                    
                    break;
                case 值2:
                    
                    break;
                case 值3:
                    
                    break;
                    
                .....
                    
                default:
                    
                    break;
                
            }
            
        特殊之处:
            1.     在javascript中case后面可以跟常量与变量还可以跟表达式     
            
    */
        
    /*    
        var option = "A";
        var score =98;
        switch(option){
            case score>=90?"A":"B":
                document.write("java");
                break;
            case "B":
                document.write("ps");
            
            case "C":
                document.write("javascript");
                break;
            case "D":
                document.write("C++");
                break;
        }
    
    */
    
    </script>
  • 相关阅读:
    RabbitMQ WindowServer2008R2 安装配置
    wpf的低调自定义属性面板PropertyGrid
    复旦大学2020--2021学年第二学期高等代数II期末考试情况分析
    复旦大学2020--2021学年第二学期(20级)高等代数II期末考试第七大题解答
    复旦大学2020--2021学年第二学期(20级)高等代数II期末考试第八大题解答
    复旦高等代数II(20级)每周一题
    复旦大学高等代数课程介绍
    consul 下线服务 服务注销脚本
    consul 集群搭建
    Linux Limit相关内容设置大全(值得收藏)
  • 原文地址:https://www.cnblogs.com/guzhou-ing/p/6464249.html
Copyright © 2020-2023  润新知