JavaScript

js是一门脚本语言，也是一门编程语言

  1. 脚本：不需要像java语言，需要编译，然后运行。只需要写完代码，然后就可以直接解析运行了。

在中国的古代，唱戏的人称为戏子，每个人手里都拿着脚本，戏子看到脚本就知道上台演什么戏，接下来该做哪些动作，js称为脚本，就说浏览器看到js写的代码，就知道要做什么事情了。

  1. js需要用浏览器解析执行，浏览器里面自带js解析引擎

  2. js既然是编程语言，所以里面也有逻辑算法，也有一些基础语法。

比如说有变量，常量，数据类型，各种运算符，数组，方法，对象…

  1. JavaScript=ECMAScript(js的基础语法)+BOM(浏览器对象模型)(是js特有的)+DOM(文档对象模型)

注意：JavaScript和Java没有任何关系，但是语法高达99%的相似度，所以我们在学习JS的时候，99%已经会了，只需要重点学习1%不一样的地方即可。

js的作用

可以让页面动起来

js的引入方式

  1. 内部编写

在html中写一个script标签，在script标签中写js代码

  1. <head>
  2.   <script>
  3.     js代码
  4.   </script>
  5. </head>

  1. 外部引入

    1. 新建一个js为后缀名的文件

      1. 写js代码

    2. 在html中的head中写一个标签，叫做script

      1. <script src="aaa.js"></script>

      注意：

  2. script标签是可以写在任意位置的

  3. script标签可以写多个
  4. 因为html文件是浏览器按照自上而下的顺序去解析的，所以如果有多个script标签的话，是按照顺序执行

ECMAScript(js的基础语法)

变量，常量，数据类型，各种运算符，数组，方法，对象

  • alert(内容)：在浏览器上弹出对话框
  • document.write(内容)：在浏览器上显示出内容

注释

  1. 1.单行注释：//内容
  2. 2.多行注释：/*内容*/
  3. 3.文档注释：/**内容*/
  1. 1.单行注释：//内容
  2. 2.多行注释：/*内容*/

数据类型

  1. Java中的数据类型分类2大类4小类8小种
  • 基本数据类型：
    • 整型：byte,short,int,long
    • 浮点型：float,double
    • 字符型：char
    • 布尔型：boolean
  • 引用数据类型：
    • jdk自带的：String,Integer,ArrayList,…
    • 自定义：Student,Person,Pig,…
  1. JS中的数据类型
  • 原始数据类型(基本数据类型)：
    • number：小数，整数，NaN(NotaNumber)
    • string：字符串，要用单引号或者双引号括起来
    • boolean：true/false
    • null：
      • Java中的null是一个常量值，专门给引用数据类型赋值的
      • JS中的null既是数据类型，也是值
    • undefined：既是数据类型，也是值
  • 引用数据类型：
    • 各种引用数据类型：String,Date,Math…

常量

  1. Java中的常量
  • 字面值常量：
    • 整数常量
    • 小数常量
    • 字符串常量
    • 字符常量
    • 空常量
    • 布尔常量
  • 自定义常量：
    • 被final修饰的就是自定义常量

finalinti=12;

  1. JS中的常量
  • 字面值常量
  • 自定义常量

consti=12;（const可以看成是final）（js是弱类型语言，所以不需要加数据类型）

变量

  1. Java中的变量
    1. Java是强类型的语言
    2. 在内存空间中，会给变量开辟一块内存空间，空间的名字就是我们起的变量名，空间里存储的数据的数据类型，是我们定义好的数据类型，空间中存储的数据，就是我们给的数据。
    3. 格式：数据类型变量名=数据;

int i = 12;

  1. JS中的变量
    1. JS是弱类型的语言
    2. 在内存空间中，会给变量开启一块内存空间，空间的名字就是我们起的变量名，但是并没有给该空间赋予数据类型，空间依然可以存储数据，而且是任何类型的数据。
    3. 格式：var变量名=数据;

var i = 12;

注意：可以使用typeof来查看变量的真实的数据类型

  • 写法一：typeof变量名
  • 写法二：typeof(变量名)
  1. let关键字和var关键字的区别
    1. var所定义的变量是全局变量
    2. let所定义的变量就正常变量，可以省略不写，默认是let，但是最好还是写上

运算符

算术运算符

+,-,*,/,%,++,—

/：除和java不一样

  1. Java中的除号：

    1. int i = 1;
    2. int j = 2;
    3. System.out.println(i / j); //0

    整数/整数=整数
    小数/整数=小数
    整数/小数=小数
    小数/小数=小数

  2. JS中的除号：

    1. let i = 1;
    2. let j = 2;
    3. alert(i / j); //0.5

    除完之后的结果是多少就是多少

+

  1. Java中的加号

    1. 加减乘除的加
    2. 正负的正
    3. 字符串连接符

  2. JS中的加号

    1. 加减乘除的加
    2. 正负的正
    3. 字符串连接符
    4. 转换符

做转换符时的情况

  1. string->number

    • 数字格式字符串

      1. let a = "123";
      2. let b = +a + 12;
      3. alert(b);//135
      4. alert(typeof b);//number

    • 非数字格式字符串

      1. let a = "abc";
      2. let b = +a + 12;
      3. alert(b);//NaN
      4. alert(typeof b);//number

  2. boolean->number

如果是true，转换成数字，为1
如果是false，转换成数字，为0

++,—

  1. let a = 10;
  2. let b = ++a + --a + a-- + a++;
  3. alert(b);//40

赋值运算符

=,+=,-=,/=…
和Java中一样

比较运算符

,<,>=,<=,!=,==,===

==

  1. Java中== ```java int i = 1; int j = 2; System.out.println(i == j);//false

int a = 12; String b = “12”; System.out.println(a == b);//编译报错

  2. 2. JS中的==
  3. ```java
  4. let i = 1;
  5. let j = 2;
  6. alert(i == j);//false
  8. ----------------------------------
  10. let a = 12;
  11. let b = "12";
  12. alert(a == b);//true
  14. js中的==比较的两个数据的结果是不是一样的
  16. ----------------------------------
  18. let a = 12;
  19. let b = "12";
  20. alert(a === b); //

js中的===比较的是两个数据的结果和数据类型一不一样

>,<

  1. Java中的比较 ```java int i = 1; int j = 2; System.out.println(i > j);//false

String i = “a”; String j = “b”; System.out.println(i > j);//编译报错

  2. 2. JS中的比较
  3. ```java
  4. int i = 1;
  5. int j = 2;
  6. System.out.println(i > j);//false
  8. ----------------------------------
  10. let i = "bb";
  11. let j = "ba";
  12. alert(i > j);//true  比的是字典顺序，b与b比，b与a比

字符串用比较运算符比较，按照字典顺序

逻辑运算符

&&,||,!
和Java中一样

注意：在js中不要用|或&即可

三元运算符

和Java中一样
条件表达式?表达式1:表达式2;

  1. Java中的三元运算符 ```javascript 1 > 2 ? 1 : 2;//编译报错，因为没有接收或者没有直接打印

int max = 1 > 2 ? System.out.println(1) : System.out.println(2); //三元不能为输出语句，因为三元运算符既然是个运算符，就必须有结果

  2. 2. JS中的三元运算符
  3. ```javascript
  4. 1 > 2 ? 1 : 2;
  6. 1 > 2 ? alert(1) : alert(2);

流程控制语句

if…else,switch,for,while…
和Java中一样

if…else

  1. Java中的if…else ```javascript if(条件表达式) {

} else {

}

条件表达式只能是boolean类型的数据，要么是true，要么是false

  2. 2. JS中的if...else
  3. ```javascript
  4. if(条件表达式) {
  6. } else {
  8. }

条件表达式可以为任意类型
只有值为false,0,NaN,””,null,undefined为false之外，其余都是true

switch

  1. Java中的switch

    1. switch(表达式) {
    2. case 取值1:
    3.  xxxooo;
    4.  break;
    5. case 取值1:
    6.  xxxooo;
    7.  break;
    8. default:
    9.  xxxoool;
    10.  break;
    11. }

    表达式的数据类型：byte,short,int,char,String,枚举

  2. JS中的switch ```javascript switch(表达式) { case 取值1: xxxooo; break; case 取值1: xxxooo; break; default: xxxoool; break; }

  1. 表达式可以为任意类型
  4. <a name="baPaE"></a>
  5. # 函数(方法)
  7. 1. Java中的方法
  8. ```javascript
  9. 定义格式：
  10. 修饰符 返回值类型 方法的名字(形参) {
  11.       方法体内容;
  12.       return 返回值;
  13. }
  15. public int getSum(int i, int j) {
  16.     return i + j;
  17. }
  19. 调用：
  20. int sum = getSum(1,2);
  21. System.out.println(sum);
  1. JS中的方法

在js中，方法有不同的含义，它可以表示一个普通的方法，也可以表示一个对象，也可以表示一个构造器。
对我们来说，我们重点只学习第一种含义，作为普通的方法使用。

  1. 定义格式：
  2.   格式一：
  3.     function 方法名(形参) {
  4.         方法体内容;
  5.     }
  7.     function aaa() {
  8.         alert("约吗");
  9.     }
  11.   格式二：
  12.     let 变量名 = function() {
  13.        方法体内容;
  14.     } //匿名方法
  16.     let aaa = function() {
  17.        alert("约吗");
  18.     }

作为普通方法的使用

  1. 情况一：
  2.   //定义方法
  3.   /* function aaa() {
  4.     alert("约吗");
  5.   } */
  7.   /* let aaa = function() {
  8.     alert("滚犊子");
  9.   } */
  11.   //调用方法
  12.   aaa();
  1. 情况二：
  2.   //定义方法：有参数
  3.   function aaa(i, j) {
  4.     alert(i + j);
  5.   }
  7.   //调用方法
  8.   aaa(1, 2);
  10.   注意：定义方法，如果有形参，数据类型不能写
  1. 情况三：
  2.   //定义方法：有返回值
  3.   function aaa(i, j) {
  4.     return i + j;
  5.   }
  7.   //调用方法
  8.   let sum = aaa(1, 2);
  9.   alert(sum);
  1. 情况四：
  2.   //定义方法：
  3.   function aaa(i) {
  4.     alert(i);//undefined
  5.   }
  7.   //调用方法
  8.   aaa();
  10.   ---------------------
  11.   //定义方法：
  12.   function aaa(i) {
  13.     alert(i);//12
  14.   }
  16.   //调用方法
  17.   aaa(12,13);
  19.   ---------------------
  21.   //定义方法
  22.   function aaa(i) {
  23.     //隐藏自带的一个数组：arguments
  24.     //alert(arguments.length);
  25.     alert(i);
  26.     for(let i = 0; i < arguments.length; i++) {
  27.       alert(arguments[i]);
  28.     }
  29.   }
  31.   aaa(12,13,14,15,16);

注意：方法的调用，实际参数和形式参数的个数不一样也可以。

作为对象的使用

  1. //作为对象使用
  2. function person() {
  4. }
  6. //给person对象动态绑定一个属性uname,值为tom
  7. person.uname = "tom";
  8. //给person对象动态绑定一个属性age,值为18
  9. person.age = 18;
  10. //给person对象动态绑定一个方法
  11. person.setUname = function(uname) {
  12.   this.uname = uname;
  13. }
  14. person.getUname = function() {
  15.   return this.uname;
  16. }
  17. person.setAge = function(age) {
  18.   this.age = age;
  19. }
  20. person.getAge = function() {
  21.   return this.age;
  22. }
  24. alert(person.uname + "..." + person.age);//tom...18
  26. person.setUname("jerry");
  27. person.setAge(19);
  29. alert(person.getUname() + "..." + person.getAge());//jerry...19

作为构造器的使用

  1. //作为构造器
  2. function Person() {
  3.   //arguments
  4.   //name="方法名"
  5.   //prototype：存储键值对容器
  6. }
  8. Person.prototype.name = "tom";
  9. Person.prototype.age = 18;
  11. /* alert(Person.prototype.name);
  12. alert(Person.prototype.age); */
  14. let p = new Person();
  15. alert(p.name + "..." + p.age);

数组

  1. 在Java中的数组

    1. int[] arr = new int[5];
    2. int[] arr = {12,13,14,15};

  2. 在js中的数组

更像是Java中的集合

定义格式

  1. 方式一：
  2.   let arr = [12,13,14,15];
  4. 方式二：
  5.   let arr = new Array(参数1,参数2,...);//传递二个以上代表数组元素
  7. 方式三：
  8.   let arr = new Array(参数);//传递一个代表数组长度

常见的遍历方法

  1. 方式一：普通for遍历
  2.   for(let i = 0; i < arr.length; i++) {
  3.     document.write(arr[i] + "<br>");
  4.   }
  6. 方式二：for...in
  7.   for(i in arr) {
  8.     document.write(arr[i]); //i是索引
  9.   }

注意：方式二遍历的数据必须是有效数据。

常见的属性
length获取长度。

常见的方法

  • join()：按照指定的格式对数组元素进行拼接
  • pop()：删除数组容器中最后一个元素
  • push()：将尾部添加一个新的元素

对象

Date

处理日期和时间

  1. let date = new Date();
  3. getTime()
  4. toLocaleString()
  5. toLocaleTimeString()
  6. toLocaleDateString()

String

  1. length
  2. charAt()
  3. concat()

Math

  1. abs(x)
  2. ceil(x)
  3. floor(x) //四舍五入
  4. random()  // [0,1)
  5. round(x) //将 x 舍入为最接近的整数。

获取1-100之间的随时整数：

  1. x = Math.floor(Math.random() * 100) + 1

Global

这个对象里的方法，不用对象名调用，可以直接使用里面的方法

常见方法：

  • encodeURI()：对字符串(URI)进行编码
    • 在utf-8下，每个汉字占3个字节

  • decodeURI()：对字符串(URI)进行解码

    1. let url = "http://www.woniuxy.com?wd=蜗牛学院";
    2. document.write(encodeURI("<br>" + url))

  • encodeURIComponent()：对字符串(URI)进行编码(包含特殊字符)

  • decodeURIComponent()：对字符串(URI)进行解码(包含特殊字符)

  • eval()：将字符串作为脚本代码来执行

    1. let a = "<br/>";
    2. eval(a);   //不对，待考察

  • isNaN()：判断是否是NaN

    1. Let a = NaN;
    2. //判断a变量的值是否是NaN
    3. /* alert(a == NaN)；
    4.   alert(a === NaN)；*/
    5. Let b = isNaN(a)；
    6. alert(b);

    o

  • parseInt()：可以将数字格式的字符串转换数字，如果字符串中有非数字的字符，那会将字符前面出现的数字转换出来

RegExp正则表达式

正则表达式就是一个字符串，里面是按照一些规则写好的字符串

正则表达式可以帮助我们对表单进行校验

正则表达式

\\ 反斜线字符
[abc] 只满足字母a或字母b字母c中的任意一个
[a-zA-Z] 出现a-z或者A-Z中的任意一个
. 任何字符（与行结束符可能匹配也可能不匹配）
\d 数字：[0-9]
[0-9] 任意数字
\w 单词字符,[a-zA-Z_0-9]
[a-zA-Z_0-9] 任意字符
^ 行的开头
$ 行的结尾
X? X，零次或一次
X* X，零次或多次
X+ X，一次或多次
X{n} X，恰好n次
X{n,} X，至少n次
X{n,m} X，至少n次，但是不超过m次

正则表达式的对象的创建方式

方式一：

  1. let reg = new RegExp("正则表达式");

方式二：

  1. let reg = /正则表达式/;

注意：第二种格式中的\不需要写两个，只需要写一个

如何使用

test(要校验的字符串);

练习：写一个正则表达式，能够校验手机号

  1. let reg = new RegExp("^1[358]\\d{9}$");  // \d在字符串里需要转义
  3. let reg= /^1[358]\d{9}$/;