day01-js笔记

1. 在html页面引入js的三种方式

  1. 使用内联式,这里涉及到的基础概念有事件句柄。js是一门事件驱动型语言,依靠事件驱动,然后执行对应的程序。

    事件句柄:任何事件都会对应一个事件句柄。事件和事件句柄的区别是:事件句柄需要在事件单词的前面加一个“on”。事件句柄在html标签中以属性的形式存在。在事件句柄属性的值里面可以写js代码,当事件触发时,事件句柄里的代码就会执行了。内联式就是直接在html标签中写js代码。

    <input type="button" value="欢迎js" onclick="window.alert('123')" />
  2. 使用代码块样式

    这里的使用方式如同css是一样的,在html代码中插入js脚本码块。不同的是js代码块的位置是随意的,css的代码块必须放在head标签里。

    <script type="text/javascript">
     window.alert("欢迎访问")
    </script>
  3. 使用外部链接的形式

    对比css进行学习。单独创建一个后缀为".js"的文件,在该文件里可以直接写js代码。然后在需要调用的html文件中进行调用,调用代码在html文件中的位置也是随意的。(不能改写成:<script /> ,这种是错误写法。)

    • 与css引入外部链接不同的是,js写文件路径用的是src="文件路径"css写文件路径用的是href="文件路径"
    • 同时注意超链接的使用也是<a href="https://baidu.com">
    • 图片标签的使用是<img src="images/001.jpg">
    • form表单中使用的是<form action = "http://192.168.0.1:3380/oa/save?" method = "post">
    <script type="text/javascript" src="js/001.js"></script>

2. 变量

  1. 变量的声明与赋值

    js属于弱类型编程语言,它的一个变量可以接受任何类型的数据。

    变量的声明:var a;。js中的分号可以添加,也可以省略。该变量声明的时候未赋值,系统默认赋值:undefined

    变量的赋值:a = 3.14;,因为是弱类型编程语言,所以可以对其赋任何类型的值,它都可以接收。

  2. 全局变量和局部变量

    • 局部变量:函数的形参和函数内使用var声明的变量是局部变量。声明周期:函数执行时分配内存,函数结束后内存释放。
    • 全局变量:函数体外声明的变量、不使用var关键字声明的变量属于全局变量。全局变量在浏览器关闭时销毁。(注意:函数体内不用var声明的变量属于全局变量
  3. js中变量的数据类型(六种)

    • 原始类型:Undefined Null Number String Boolean
    • 引用类型:Object

    ES6之后新添加了一种数据类型:Symbol

    1. Undefined类型

      Undefined类型只有一个值就是undefined。变量声明但没有赋值的时候,系统默认给变量赋值undefined。

    2. Null类型

      该类型只有一个值,null

      typeof运算后的结果是“object”

    3. Boolean类型

      该类型只有两个值,truefalse

      Js中if语句和while语句的括号里会自动调用Boolean()函数,将不是Boolean类型的值转换为Boolean类型。转换规律是:“有”则转换为true,“无”则转换为false。

    4. Number类型

      • 该类型的值包括有:整数和小数,还有两个特殊的,NaN(不是一个数字),Infinity(无穷大)。

      • NaN(Not a Number),属于Number类型,运算结果本来是一个数字,但是算完之后不是一个数字,此时结果为:NaN

      • 关于Number类型有几个常用的函数。
        isNaN(),当运算结果不是一个数字的话返回true,是一个数字的话返回false。
        parseInt(),将字符串转换为数字,并取整数位。如果传入的参数是一个Numer类型的小数,也可以进行取整数位。
        parseFloat,将字符串转换为数字。

        Math.ceil(),向上取整。

    5. String类型

      Js中的字符串包括小String和大String两种。小String属于原始类型,大String是Js的内置对象,属于Object类型。

      在Js中,字符串可以使用单引号,也可以使用双引号。

      小String和大String的属性和函数是通用的。

      常用属性:length,返回字符串的长度。

      大小String的定义如下:通过new对象方式创建出的是大String

      var s1 = "hello js";//创建小String
      var s2 = new String("nice to meet you");//创建大String
      alert(typeof s1); //"string"
      alert(typeof s2); //"object"

      关于String的一些函数:着重记忆这两个函数,会区分

      • substr(startIndex, length),开始索引,截取长度
      • substring(startIndex. endIndex) ,[开始索引,结束索引),左闭右开。

      两个函数都是截取字符串的函数,不同的是函数的参数的意义不同。

      var s3 = "abcdefghijklmn";
      alert(s3.substr(3,5)); //de
      alert(s3.substring(3,5));//defgh
    6. Object类型

      1. Object类型是所有类型的超类,自定义的任何类都会默认继承Object。

      2. Object类中的常用属性:prototype属性,用来给类后期扩展属性和函数。

      3. 如何定义一个类,定义类有两种方式写法。Js中类的定义,同时又是构造函数的定义,类的定义和构造函数的定义是放在一起完成的。

        下面分别用两种方法定义一个学生类,该类中有三个属性,学号,姓名,年龄。类中定义一个函数(在java中叫方法,js中叫做函数),在类中定义函数的方法只有一种。类中属性的定义和函数的定义都要使用this
        第一种方式:

        //第一种方式
        function Student(no, name, age){
            //属性
            this.no = no;
            this.name = name;
            this.age = age;
            //函数
            this.getDetail = function(){
                return "学号: " + this.no + " 姓名: " + this.name + " 年龄: " + this.age;
            }

        第二种方式:

        Student = function(no, name, age){
            this.no = no;
            this.name = name;
            this.age = age;
            this.getDetail = function(){
               return this.no + " " + this.name + " "+ this.age;
            }
        }
      4. 创建一个对象,访问类中方法,调用对象中的函数。

        • 同样使用new运算符创建对象。var st1 = new Student(110, "张三", "15");

        • 调用对象中的方法。var s = st1.getDetail();

        • 访问对象中的属性。第一种方式采用引用.,第二种方式如下:

          var st1 = new Student(110, "张三", "15");
          alert(st1['no']);
          alert(st1['name']);
          alert(st1['age']);
        • 使用prototype属性扩展属性。扩展的属性需要后期赋值,不能在new对象的时候直接创建出来,因为构造函数是已经声明过的。

          //为Student类扩展一个属性
          Student.prototype.gender;
          var st2 = new Student(120, "李四", 18);
          //对扩展属性赋值(不能直接new出带扩展属性的对象,因为构造函数是固定的)
          st2.gender = "男";
          alert(st2.gender);
        • 使用prototype属性扩展方法。

          //为Student类扩展方法
          Student.prototype.getGender = function(){
          return "性别: " + this.gender;
          }
          alert(st2.getGender());

3. null NaN undefined三者区别

Last modification:July 11th, 2020 at 06:14 pm
有钱的捧个钱场,没带钱的捧个人场。

Leave a Comment