day01-js笔记

Author： Andy__lee
发布时间：July 11, 2020
263 views
No comments
5005 字数
Categories：学习笔记

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

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

事件句柄：任何事件都会对应一个事件句柄。事件和事件句柄的区别是：事件句柄需要在事件单词的前面加一个“on”。事件句柄在html标签中以属性的形式存在。在事件句柄属性的值里面可以写js代码，当事件触发时，事件句柄里的代码就会执行了。内联式就是直接在html标签中写js代码。
```
<input type="button" value="欢迎js" onclick="window.alert('123')" />
```
使用代码块样式

这里的使用方式如同css是一样的，在html代码中插入js脚本码块。不同的是js代码块的位置是随意的，css的代码块必须放在head标签里。
```
<script type="text/javascript">
 window.alert("欢迎访问")
</script>
```
使用外部链接的形式

对比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. 变量

变量的声明与赋值

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

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

变量的赋值：a = 3.14;，因为是弱类型编程语言，所以可以对其赋任何类型的值，它都可以接收。
全局变量和局部变量
- 局部变量：函数的形参和函数内使用var声明的变量是局部变量。声明周期：函数执行时分配内存，函数结束后内存释放。
- 全局变量：函数体外声明的变量、不使用var关键字声明的变量属于全局变量。全局变量在浏览器关闭时销毁。（注意：函数体内不用var声明的变量属于全局变量）
js中变量的数据类型(六种)
- 原始类型：Undefined Null Number String Boolean
- 引用类型：Object
ES6之后新添加了一种数据类型：Symbol
1. Undefined类型
  
  Undefined类型只有一个值就是undefined。变量声明但没有赋值的时候，系统默认给变量赋值undefined。
2. Null类型
  
  该类型只有一个值，null。
  
  typeof运算后的结果是“object”
3. Boolean类型
  
  该类型只有两个值，true和false。
  
  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

有钱的捧个钱场，没带钱的捧个人场。

day01-js笔记

Andy__lee • 2021 年 01 月 18 日

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

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

事件句柄：任何事件都会对应一个事件句柄。事件和事件句柄的区别是：事件句柄需要在事件单词的前面加一个“on”。事件句柄在html标签中以属性的形式存在。在事件句柄属性的值里面可以写js代码，当事件触发时，事件句柄里的代码就会执行了。内联式就是直接在html标签中写js代码。
```
<input type="button" value="欢迎js" onclick="window.alert('123')" />
```
使用代码块样式

这里的使用方式如同css是一样的，在html代码中插入js脚本码块。不同的是js代码块的位置是随意的，css的代码块必须放在head标签里。
```
<script type="text/javascript">
 window.alert("欢迎访问")
</script>
```
使用外部链接的形式

对比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. 变量

变量的声明与赋值

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

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

变量的赋值：a = 3.14;，因为是弱类型编程语言，所以可以对其赋任何类型的值，它都可以接收。
全局变量和局部变量
- 局部变量：函数的形参和函数内使用var声明的变量是局部变量。声明周期：函数执行时分配内存，函数结束后内存释放。
- 全局变量：函数体外声明的变量、不使用var关键字声明的变量属于全局变量。全局变量在浏览器关闭时销毁。（注意：函数体内不用var声明的变量属于全局变量）
js中变量的数据类型(六种)
- 原始类型：Undefined Null Number String Boolean
- 引用类型：Object
ES6之后新添加了一种数据类型：Symbol
1. Undefined类型
  
  Undefined类型只有一个值就是undefined。变量声明但没有赋值的时候，系统默认给变量赋值undefined。
2. Null类型
  
  该类型只有一个值，null。
  
  typeof运算后的结果是“object”
3. Boolean类型
  
  该类型只有两个值，true和false。
  
  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());
```

day01-js笔记

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

2. 变量

3. null NaN undefined三者区别

Leave a Comment Cancel reply

自律给我自由

小米OJ题解[1-10]

常用链接集合

【数据结构之九大排序算法】

线性代数复习笔记(一)【行列式、矩阵】

自律给我自由

day01-js笔记

2019Matlab考试复习

牛客小白月赛13题解

小米OJ题解[1-10]

day01-js笔记

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

2. 变量

3. null NaN undefined三者区别