zoukankan      html  css  js  c++  java
  • JavaScript笔记

    一、Javascript概述(知道)

      a.一种基于对象和事件驱动的脚本语言
      b.作用: 给页面添加动态效果
      c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAscipt.
      d.特点:
        1). 弱势语言
        2). 由浏览器直接解析执行。(函数不能直接执行)
        3). 是一个解释性语言
        4). 交互性(它可以做的就是信息的动态交互)
        5). 安全性(不允许直接访问本地硬盘)
        6). 跨平台性(只要是可以解析Js的浏览器都可以执行,和平台无关
      e . javascript和java的一些区别:
        1). javascript是一个解释性语言,java是编译解释性语言
        2). javascript是一个弱势语言,Java是一个强势语言
        3). 在页面上引入的方式不同javascript代表用<script>引入,Java代码<%>
        4). JS是基于对象,Java是面向对象。

    二、JavaScript语言组成(了解)

      EcMAScript + BOM + DOM
      ECMAScript: 规定了一些语法,变量,for循环等等结构
        BOM: Browser object Model 浏览器对象模型
        DOM: Document object Model 文档对象模型

    三、JavaScript与Html的结合方式(掌握)

      Javascript与HTML的结合方式有三种:
        1.采用事件来调用,代码写在字符串中
          <button onclick = "alert('大家好')">点击</button>
        2.采用定义函数的方式: 用function来定义函数
          function fun(){ alert('你好')} ;
        3.采用外部js文件.
          利用<script src = "a.js"></script>引入

    四、JavaScript基本语法(掌握)

      * 定义变量:采用var关键字来定义.定义的变量的类型是由给定的值来决定的。
      * 数据类型: undifined,表示未定义类型。
            Number类型。代表了一切数字类型
            String类型。字符串类型
            Boolean类型。布尔类型
            Function类型。函数类型
            Null类型。
            object :对象类型.
      * 判断变量的类型 :
          1. 采用typeof函数判断 :typeof(a) == "string"
          2. 采用instanceof运算符: a instanceof String

      * 三大结构
          a.顺序结构
          b.选择结构
          c.循环结构 for,while,do...while

      * 运算符
          1.一元运算符 +(正号) - ++ --
          2.二元运算符 +(加法) - * / %
          3.三元运算符 ? :
          4.等号 == 判断的是内容,"100"=100;
            === 全等于 ,判断类型和内容;

      * 类型的转换
          1. Number转String : 3 + ""
          2. Number转Boolean :在javascript中,非0为真,0为假。如果变量为null或者undefined,也为假.
          3. String转Number:
            a. parseInt,parseFloat
            b. 乘以1即可

    五、JavaScript 函数的定义(掌握)

      * 函数的定义有三种方式:
          1.采用function关键字来定义
          2.采用匿名的方式来定义
          3.采用new Function()的方式(了解,不推荐)

      * 函数的调用:
          1.函数调用的时候参数可以传递多个,可以和函数定义的形参个数不符合
          2.如果函数重名了,那么调用的时候一定是调用最后一个,与参数无关。
        *** 推荐: 定义函数的不要重名。

          函数劫持:改变函数本身的作用.

    六、JavaScript 全局函数(掌握)

      全局函数:
        1.isNaN (掌握):用来判断变量是否是数字类型的字符串
          NaN: not a Number ,不是一个数字
        2.parseInt,parseFloat
        3.eval(掌握): 把字符串转换成数字
        4.escape(): 编码
        5.unescape(): 解码
        6.encodeURI(): 对网址(URL)进行编码
        7.decodeURI(): 对网址(URL)进行解码

    七、JavaScript常用对象介绍(掌握)

      * Array对象 数组对象,进行数组操作
        定义方式
          1.采用new的方式
          2.采用中括号[]来定义
            数组的长度可以随时改变

        特点:
          1.javascript中数组的大小可以随时改变
          2.javascript中数组的下标可以是任意对象。

        方法: 

          1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接
          2.push() : 向数组的末尾添加一个元素
          3.shift() : 删除并返回数组的第一个元素
          4.sort() ; 排序 .默认同类型的数据相比较.

          传递一个function类型参数,制定自己的规则:
            var arr=[3,8,"23","34",123];
            alert(arr.sort(function(a,b)
            {
              if(a*1>b*1)
                return 1;
              else
                return -1;
            }


            补充:标题栏滚动:
          <body onload="init()">
            <script type="text/javascript">
              function init()
              {
                var title=document.title; //1、拿到标题栏文本
                var arr=title.split(""); //2、将文本转换为数组
                var first=arr.shift(); //3、拿到数组的第一个元素
                arr.push(first); //4、将第一个元素添加到数组最后
                title=arr.join(""); //5、将数组再组合成一个字符串
                document.title=title; //6、将字符串再赋值到标题栏
                setTimeout("init()",300); //7、每隔1秒循环前6步
              }
            </script>
          </body>

              变换颜色:
            function color()
            {
              var arr=["red","yellow","blue","green","purple","pink"];//1、将颜色装进数组
              var p=document.getElementById("p"); //2、拿到标签主体内容
              var index=Math.floor(Math.random()*arr.length); //3、随机取得一个整数作为数组的下标
              p.innerHTML=p.innerText.fontcolor(arr[index]); //4、给标签的主体内容改变颜色并赋值回去
              setTimeout("color()",1);
            }
      * String对象 ----- 字符串类型的引用类型
        String对象:
           方式: substr: 截取字符串 两个参数第一个是下标,第二个是长度
              substring: 截取字符串 两个参数第一个是下标,第二个是下标
              toUppercase:
              toLowercase:
              indexOf:
              charAt() :
              replace():
      * Number对象 ---- 数字原始类型引用类型
        Num对象:
          1. random() : 获得随机数[0,1)
          2. ceil() : 返回大于等于此数的最大整数
          3. floor() : 返回小于等于此数的最大整数
          4. round(): 返回四舍五入后的整数
      * Boolean对象 ---- 布尔原始类型引用类型
      * Math对象 执行数学任务
      * Date对象 用于处理日期和时间
        Date对象: 代表一个时间
          当前日期时间:new Date().toLocaleString();
          方法: getXXX() : 拿到年月日
      * RegExp 对象正则表达式对象
        正则表达式
          写法: 1. new的方式 var r = new RegExp("ab") ;
              2. 采用/正则表达式/ (推荐) var r = /ab/ ;

    八、JavaScript模拟类的定义

      1、定义类并创建类的实例对象
          function Person(){
          }
        var p = new Person();
      2、定义共有属性和私有属性
        定义私有属性:
          1)、在函数中:用var定义;
          2)、在函数外:用对象.属性名定义;
        定义公有属性:
          1)、在函数中:用this.属性名定义;
          2)、在函数外:函数名.prototype.属性名 = 默认值
            function Person(){
              var name = "颜玲";
              this.age = 18;
            }
            Person.prototype.height=172;
      3、定义公有方法和私有方法
        定义私有方法:
          1)、在函数中:采用 var 方法名 = function(){} 定义;
          2)、在函数外:采用 对象名.方法名 = function(){} 定义
            function Person(){
              var show = function(){
                alert("我是私有方法") ;
              }
              this.display = function(){ //公有方法
                show() ;
              }
            }
            var p= new Person();
            p.show() ; //调用不来,因为是私有的
            p.display() ; //可以调用,公有方法
        定义公有方法:
        1)、在函数中:采用 this.方法名= function(){} 定义
        2)、在函数外:采用 函数名.prototype.方法名=function(){} 定义
          Person.prototype.sing = function(){
            alert("我喜欢颜玲!") ;
          }
      4、静态属性和静态方法
        ***注意: 定义静态属性和方法都用函数名来定义。
            调用的时候只能用函数名来调用,不能用对象调用。
              function Person(){

              }
              Person.name = "张三" ;
              Person.show = function(){
                alert("我是静态方法") ;
              }
              var p = new Person() ;
              alert(p.name) ; //弹不出来,因为name是静态的
              p.show() ; //出错,因为show方法是静态的,要用函数名调用 */
      5、构造函数(无参,有参)
        ***注意: 函数名不要重复,因为先定义的函数永远调用不了
      6、如何创建javascript对象
        创建javascript对象的三种方式:
          1)、采用 new 函数名() ;
          2)、采用 new Object() ;
          3)、采用 json格式定义
            function Person(){};
            var p = new Person() ;

            var obj = new Object() ;
            obj.name = "李四" ;
            alert(typeof(obj)) ;
            alert(obj.name) ;

            var json = {"a":"中国","b":"美国","c":"日本"} ; //定义了一个json对象
            var json1 = {1:"中国",2:"美国",3:"日本"} ; //定义了一个json对象
            alert(typeof(json)) ; //object
            alert(json.a) ; //拿到中国字符串
            alert(json["b"]) ; //拿到美国字符串

            alert(json1["2"]) ; //拿到美国字符串,注意不要用json1."2"此种写法

            //如果想拿到所有的值,需要用foreach循环
            for(var i in json){
              alert(i + " :" + json[i]) ; //打印所有的值,写法不能用json.i
            }
      7、 扩展已有对象的方法
        Array.prototype.getMax = function(){} //扩展数组的方法
      8、继承
        function Person(){
          var name = "张三" ; //私有
          this.age = 100 ; //公有
          var show = function(){ //私有
            alert("我是私有方法") ;
          }
          this.display = function(){ //公有
            show() ;
          }
        }

        function Student(){
          this.display = function(){
            alert("大家好") ;
          }
        }
        //希望student函数继承于Person函数
    ------------Student.prototype = new Person() ;----------------
        var s = new Student() ;
        alert(s.name) ; //弹不出来,因为name是私有的,继承不下来
        alert(s.age) ;
        s.show() ; //报错,因为show方法是私有的,继承不下来
        s.display() ;
      9、重载重写
        重载没有意义,重写意义不大。

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------

    此笔记可能尚不完善,为本人学习整理,整理不易,仅供参考,如有错误,请联系作者修改,特此分享,谢谢阅读!

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------

  • 相关阅读:
    关于findViewById返回空指针的错误
    android客户端向服务器发送图片和文字,类似于发微博。能用json格式发送吗?
    nodejs 学习资料大全
    篇章三:[AngularJS] 使用AngularCSS動態載入CSS
    篇章二:[AngularJS] 使用AngularAMD動態載入Service
    篇章一:[AngularJS] 使用AngularAMD動態載入Controller
    Angular 资料大集合
    js-音乐播放器,播放|暂停|滑块的功能
    JS-以鼠标位置为中心的滑轮放大功能demo1
    使用 Electron 构建桌面应用(拖动控制篇)
  • 原文地址:https://www.cnblogs.com/Jery-9527/p/9496780.html
Copyright © 2011-2022 走看看